React useEffect Hook

What is useEffect Hook in React?

useEffect runs code after React has rendered and committed to the DOM. It is where side effects belong: data fetching, subscriptions, timers, logging and manual DOM work that React does not manage.

Why useEffect Hook matters

Rendering must be pure — the same props and state must always produce the same output. Effects give you a safe place to reach outside React without breaking that guarantee.

useEffect Hook example

import { useState, useEffect } from 'react';

function JobDetail({ id }) {
  const [job, setJob] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/jobs/${id}`, { signal: controller.signal })
      .then(r => r.json())
      .then(setJob)
      .catch(err => { if (err.name !== 'AbortError') console.error(err); });

    return () => controller.abort();   // cleanup
  }, [id]);                            // re-run when id changes

  return job ? <h1>{job.title}</h1> : <p>Loading…</p>;
}

How this works

The effect runs after the first render and again whenever id changes. Before each re-run — and on unmount — React calls the cleanup, aborting any request still in flight so a stale response can never overwrite fresh data.

What the dependency array controls

Common mistakes with useEffect Hook

• Omitting the dependency array and creating an infinite loop when the effect sets state.
• Listing an object or array dependency that is recreated every render, so the effect never stops firing.
• Forgetting cleanup for intervals, event listeners and subscriptions.
• Using an effect to compute a value from existing state — just compute it during render.