Hard15 minReact Fundamentals

useEffect vs useLayoutEffect

Browser Rendering Pipeline

Why This Is Asked

This tests deep knowledge of React’s rendering pipeline and the browser paint cycle. Interviewers want to know if you understand when each hook fires relative to the browser paint, and whether you can identify the specific scenarios where useLayoutEffect is necessary (DOM measurements, flicker prevention).

Key Concepts

  • useEffect fires asynchronously after the browser has painted — it does not block visual updates
  • useLayoutEffect fires synchronously after DOM mutations but before the browser paints
  • Use useLayoutEffect when you need to measure or mutate the DOM before the user sees it (e.g., tooltips, scroll position, animations)
  • useLayoutEffect blocks the paint, so heavy computation in it causes visible jank
  • useLayoutEffect doesn’t run on the server — using it in SSR components triggers warnings

Answers by Technology

+ Add Variant
ReactImprove this answer ✏️

Expected Answer

The primary difference is the timing of execution relative to the browser’s paint cycle:

  1. useEffect (Asynchronous):

    • Runs after the browser has painted the screen.
    • It is non-blocking and preferred for most side effects (data fetching, setting up subscriptions, logging).
    • This ensures the UI feels responsive as the browser can update the screen immediately after the render.

  2. useLayoutEffect (Synchronous):

    • Runs after React has performed all DOM mutations but before the browser has a chance to paint those changes.
    • Use this when you need to measure the DOM (e.g., getting the height of an element) and synchronously re-render based on those measurements.
    • If you used useEffect for DOM measurements that change the UI, the user might see a “flicker” because the initial render is painted, then the effect runs and triggers a second render.

Common Mistakes

  • Overusing useLayoutEffect: It blocks the browser’s paint, which can significantly degrade performance if the effect logic is heavy.
  • SSR Warnings: useLayoutEffect doesn’t work on the server. Using it in components that are Server-Side Rendered results in warnings and potentially mismatched hydration.

Follow-up Questions

  • How does React Fiber coordinate these effects?
  • What happens if you trigger a state update inside useLayoutEffect? (Answer: It triggers a synchronous re-render before the paint).