useEffect Lifecycle in React

Theory

See how React useEffect works with an interactive visualization. Step through the render-commit-paint-effect timeline, dependency array comparisons, cleanup function timing, and common patterns.

Loading visualization...

What is useEffect Lifecycle in React?

useEffect runs side effects after React commits DOM updates and the browser paints. The dependency array controls when effects re-run, and the cleanup function handles teardown before the next invocation or unmount.

useEffect is a React hook for synchronizing a component with an external system. It accepts a setup function and an optional dependency array. React calls the setup function after the browser has painted the committed DOM changes, not during the render phase.

The dependency array tells React when to re-run the effect. An empty array means run once on mount. Omitting the array means run after every render. Listing specific values means re-run only when those values change, compared with Object.is.

The setup function can return a cleanup function. React calls cleanup before re-running the effect with new values and one final time when the component unmounts. Each cleanup closes over the values from the render that created it, not the current render.

Interview framing: define useEffect Lifecycle in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.

useEffect Lifecycle on MDN

How useEffect Lifecycle works

Step 1: the component renders. React calls the function body, records any useEffect calls, and produces a virtual DOM tree. No effects run yet.
Step 2: React commits DOM mutations from the diff. The browser paints the updated pixels to the screen.
Step 3: React checks the dependency array against the previous render's deps using Object.is. If any value changed (or this is the first render), React marks the effect for execution.
Step 4: React runs pending cleanups from the previous render first, then runs the new effect setup functions. This order ensures the old subscription is torn down before the new one is created.

Common useEffect Lifecycle mistakes

Missing dependencies causing stale closures

If a variable used inside the effect is not listed in the dependency array, the effect captures the value from the render when it was created and never sees updates.

Fix: Include every reactive value the effect reads in the dependency array. Use the react-hooks/exhaustive-deps ESLint rule to catch missing deps automatically.

Objects or arrays in deps causing infinite loops

Creating a new object or array during render produces a new reference every time. Object.is sees it as changed, so the effect re-runs on every render.

Fix: Move the object creation outside the component, memoize it with useMemo, or list the individual primitive values the effect actually needs.

Confusing useEffect with useLayoutEffect

useEffect runs after paint, which can cause a visible flicker if the effect modifies the DOM. useLayoutEffect runs after commit but before paint, blocking the browser until it finishes.

Fix: Default to useEffect. Switch to useLayoutEffect only when you need to read layout (e.g., measuring an element) or make DOM changes that must be visible on the first paint.

useEffect Lifecycle interview questions

Common interview prompts with concise model answers.

When does useEffect run relative to rendering?

useEffect runs after the browser has painted the committed DOM changes. React first renders (calls the component function), then commits DOM mutations, then the browser paints, and finally React runs pending effects. This is asynchronous relative to the render.

What happens when you pass no dependency array vs an empty array?

No array: the effect runs after every render. Empty array []: the effect runs once after the initial mount and cleanup runs once on unmount. This is because React has no dependencies to compare, so it never finds a reason to re-run.

How does cleanup timing work with dependency changes?

When deps change, React first runs the cleanup from the previous effect (which closes over the old values), then runs the new effect setup (which closes over the current values). On unmount, React runs the final cleanup. This ensures resources from the old render are always released before new ones are created.

useEffect(() => {
  console.log("connect to", roomId);
  return () => {
    console.log("disconnect from", roomId);
  };
}, [roomId]);
// roomId "A" -> "B":
// "disconnect from A" (cleanup)
// "connect to B"      (new effect)

Related React concepts

Continue with these concepts to strengthen your mental model.

Hooks Render Cycle Closures Memoization Suspense

What is useEffect Lifecycle in React?

Interview framing: define useEffect Lifecycle in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.

useEffect Lifecycle on MDN

How useEffect Lifecycle works

Step 1: the component renders. React calls the function body, records any useEffect calls, and produces a virtual DOM tree. No effects run yet.

Step 2: React commits DOM mutations from the diff. The browser paints the updated pixels to the screen.

Step 3: React checks the dependency array against the previous render's deps using Object.is. If any value changed (or this is the first render), React marks the effect for execution.

Step 4: React runs pending cleanups from the previous render first, then runs the new effect setup functions. This order ensures the old subscription is torn down before the new one is created.

Common useEffect Lifecycle mistakes

Missing dependencies causing stale closures

If a variable used inside the effect is not listed in the dependency array, the effect captures the value from the render when it was created and never sees updates.

Fix: Include every reactive value the effect reads in the dependency array. Use the react-hooks/exhaustive-deps ESLint rule to catch missing deps automatically.

Objects or arrays in deps causing infinite loops

Creating a new object or array during render produces a new reference every time. Object.is sees it as changed, so the effect re-runs on every render.

Fix: Move the object creation outside the component, memoize it with useMemo, or list the individual primitive values the effect actually needs.

Confusing useEffect with useLayoutEffect

useEffect runs after paint, which can cause a visible flicker if the effect modifies the DOM. useLayoutEffect runs after commit but before paint, blocking the browser until it finishes.

Fix: Default to useEffect. Switch to useLayoutEffect only when you need to read layout (e.g., measuring an element) or make DOM changes that must be visible on the first paint.

useEffect Lifecycle interview questions

Common interview prompts with concise model answers.

When does useEffect run relative to rendering?

What happens when you pass no dependency array vs an empty array?

How does cleanup timing work with dependency changes?

useEffect(() => {
  console.log("connect to", roomId);
  return () => {
    console.log("disconnect from", roomId);
  };
}, [roomId]);
// roomId "A" -> "B":
// "disconnect from A" (cleanup)
// "connect to B"      (new effect)