React's side-effect model: render is pure, effects happen after commit.

What counts as a side effect

• DOM manipulation outside React (focus, scroll, third-party widgets).
• Network requests.
• Subscriptions (WebSocket, EventSource, observers).
• Timers (setTimeout, setInterval).
• Logging and analytics.
• localStorage / sessionStorage writes.
• Document title changes.

Reading state and producing JSX is NOT a side effect — that's render.

The useEffect contract

useEffect(() => {
  // setup — runs after commit
  return () => {
    // cleanup — runs before next setup AND on unmount
  };
}, [deps]);

Rules:

• React calls setup after the DOM is committed (so the user sees the new UI before the effect runs).
• React calls cleanup before the next setup, and on unmount.
• React compares deps with Object.is. Same → skip the effect. Different → cleanup then setup.

Lifecycle in a function component

1. Body executes → JSX returned.
2. Reconciliation + commit.
3. useLayoutEffect (synchronous, before paint).
4. Browser paints.
5. useEffect (asynchronous, after paint).

On next render: cleanups from previous run BEFORE new setups.

Examples

Subscription:

useEffect(() => {
  const sub = stream.subscribe(handleData);
  return () => sub.unsubscribe();
}, [stream]);

Timer:

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

DOM listener:

useEffect(() => {
  const onResize = () => setW(window.innerWidth);
  window.addEventListener('resize', onResize);
  return () => window.removeEventListener('resize', onResize);
}, []);

In-flight fetch:

useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(...);
  return () => ctrl.abort();
}, [url]);

Effective management

1. Keep effects small and focused. One concern per effect. Multiple effects in one component is fine — better than a mega-effect.

2. Don't sync state from state.

// BAD
useEffect(() => { setFullName(`${first} ${last}`); }, [first, last]);

// GOOD — derive in render
const fullName = `${first} ${last}`;

3. Don't fetch in effects — use React Query.

Effects-for-fetching has well-known pitfalls (stale state, abort, race conditions, dedup). React Query handles all of them.

4. Reset state via key, not effect.

// BAD
useEffect(() => { setLocal(prop); }, [prop]);

// GOOD
<Form key={prop} initialValue={prop} />

5. Use refs for non-reactive values.

const handlerRef = useRef(handler);
useEffect(() => { handlerRef.current = handler; }, [handler]);

Lets you read the latest value inside an effect without re-running.

6. StrictMode catches bugs.

React 18 StrictMode dev mounts → unmounts → mounts each component. Cleanup that isn't idempotent will break.

Common bugs

• Missing cleanup: subscriptions/timers leak.
• Stale closure: setInterval captures the original state, not latest.
• Infinite loop: setState in effect with same value in deps.
• Object/array dep recreated each render: effect runs every render.

useEffect vs useLayoutEffect

Default to useEffect; reach for useLayoutEffect only when paint-blocking is necessary.

Senior framing

useEffect is a contract: 'when these inputs change, perform this synchronization with the outside world, and clean up when done'. Most useEffect bugs are violations of that contract: missing cleanup, state-from-state syncs, missing deps. The React docs page 'You might not need an effect' is the canonical reference.