React Life Cycle (Hooks era)

A visual map of the function component lifecycle in the hooks era. Arrows show the order React runs each phase.

The render phase can be paused / aborted / re-run by React. Therefore:

• Render must be pure — no side effects (don’t fetch or setState in the body).
• Only the commit phase is guaranteed to run once and synchronously.
• useTransition/useDeferredValue mark an update as interruptible.

A static diagram for class components using the same 3-column style so you can compare directly with the hooks diagram above.

The component below logs each phase to the console — run it to see the actual execution order between render, commit, useLayoutEffect and useEffect.

tsx
function Counter({ step }: { step: number }) {
  const [count, setCount] = useState(0);
  console.log('1. Render', { count, step });

  useLayoutEffect(() => {
    console.log('3. useLayoutEffect (sync, before paint)');
    return () => console.log('   ↳ cleanup useLayoutEffect');
  }, [count]);

  useEffect(() => {
    console.log('4. useEffect (async, after paint)');
    const id = setInterval(() => setCount((c) => c + step), 1000);
    return () => {
      console.log('   ↳ cleanup useEffect (interval)');
      clearInterval(id);
    };
  }, [step]);

  // 2. React commits the DOM here (between render and effect)
  return <p>Count: {count}</p>;
}

useEffect runs after the browser paints, so the user may briefly see an "intermediate" frame before the effect updates the DOM. useLayoutEffect runs synchronously before paint → avoids flicker but blocks render.

tsx
// Tooltip needs to measure its size then position itself — useEffect would flicker
function Tooltip({ targetRect, children }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [top, setTop] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current!.getBoundingClientRect();
    setTop(targetRect.top - height - 8);   // sync before paint → 0 flicker
  }, [targetRect]);

  return <div ref={ref} style={{ top }}>{children}</div>;
}

In dev, React deliberately mounts → unmounts → mounts again once to force you to write cleanup correctly. Production is NOT affected.

tsx
useEffect(() => {
  console.log('connect');
  const conn = chat.connect();
  return () => {
    console.log('disconnect');
    conn.disconnect();
  };
}, []);

// Dev console:
// connect
// disconnect    ← React simulated unmount
// connect       ← mount again
// → without cleanup, you'd have 2 connections alive at once

• use(promise) — read a Promise/Context during render, integrated with Suspense. Replaces many useEffect + setState fetch cases.
• useActionState(action, initial) — manage state for an async form action, with pending.
• useFormStatus() — read the pending status of the parent form inside a submit button.
• useOptimistic(state, reducer) — optimistic UI while an action is running.
• Auto memoization (React Compiler) — will reduce the need for useMemo/useCallback.

tsx
useEffect(() => {
  // Mount + whenever deps change (Update)
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // Cleanup: runs on Unmount OR before the next effect
}, [deps]);

Mount:
  1. Initialize state (useState/useReducer)
  2. Render JSX
  3. Commit to the DOM
  4. useLayoutEffect (sync)
  5. Paint
  6. useEffect (async)

Update:
  1. State/props change → re-render
  2. Diff & commit
  3. Old effect cleanup → new useEffect (if deps changed)

Unmount:
  1. Clean up all effects (child first, parent last)

tsx
useState(initial)         // simple state
useReducer(reducer, init) // complex state / many actions
useRef(initial)           // value box, no re-render
useMemo(fn, [deps])       // cache an expensive compute
useCallback(fn, [deps])   // cache a function reference
useTransition()           // mark a non-urgent update
useDeferredValue(value)   // defer a value until idle
useId()                   // stable id for a11y
useSyncExternalStore()    // subscribe to a store outside React