What’s the Difference Between useEffect and useLayoutEffect in React?

React provides two hooks to handle side effects:

Both are used to run code after a render, but they differ in when they execute and how they affect rendering performance.

Let’s break it down clearly.

useEffect – Runs After Painting the Screen

useEffect is asynchronous. It runs after the DOM has been painted, meaning the browser has already displayed your component.

Use When

Example

useEffect(() => {
    console.log('Runs after paint');
}, []);

Use case: API calls, analytics, event listeners, updating localStorage

useLayoutEffect – Runs Before Painting the Screen

useLayoutEffect is synchronous. It runs after React renders the DOM but before the browser paints it, blocking the screen until it's done.

Use When

Example

useLayoutEffect(() => {
    const height = ref.current.offsetHeight;
    console.log('Measured before paint:', height);
}, []);

Use case: DOM measurements, scroll positioning, animations, fixing layout shifts

Comparison Table: useEffect vs useLayoutEffect

Feature useEffect useLayoutEffect
Runs After Paint? ? Yes ? No
Blocking UI Render? ? No ? Yes (can cause delay)
Ideal for Async tasks, API calls DOM measurements, animations
Performance Impact Minimal Can block rendering
Runs in Node.js (SSR)? ? Yes ? No (not supported)

When Not to Use useLayoutEffect

Visual Explanation (Optional Add-On)

[Render Phase] ? [DOM Commit] ?
    - useLayoutEffect fires (sync)
    - Browser paints screen
    - useEffect fires (async)

Conclusion

Use useEffect for

Use useLayoutEffect for:

Pro Tip: Start with useEffect. If your layout or animation breaks visually, then try useLayoutEffect.