React: Difference between useEffect and useLayoutEffect?

useEffect and useLayoutEffect are two hooks for executing side effects. The difference is when they execute.

Simple analogy: Imagine you are a photographer at a wedding.

• useEffect — you take a photo, go to a dark room to develop the film (asynchronously), while guests continue to have fun. The interface is not blocked.
• useLayoutEffect — you take a photo and print it immediately on the spot while guests wait (synchronously). The interface lags, but the photo is ready instantly.

Technically:

useEffect (asynchronously — after rendering):

1. Component renders → 2. Browser "draws" changes on screen → 3. useEffect executes. User may notice "flicker" (old data first, then new), but the app does not lag. Used for: data loading, subscriptions, analytics.

useLayoutEffect (synchronously — before rendering):

1. Component renders → 2. useLayoutEffect executes → 3. Browser "draws" updates. User does NOT see intermediate states, but the app may freeze while the effect works. Used for: measuring DOM (element height), animations, fixing visual bugs.

1// Example: need to know element height
2function MyComponent() {
3    const ref = useRef();
4    
5    // useLayoutEffect — BEFORE the user sees
6    useLayoutEffect(() => {
7        console.log('Height:', ref.current.offsetHeight);
8    }, []);
9    
10    return <div ref={ref}>...</div>;
11}

Step-by-step comparison:

1. Component function runs, JSX is evaluated.
2. React commits Virtual DOM to real DOM.
3. useLayoutEffect fires SYNCHRONOUSLY — browser has NOT painted yet.
4. Browser paints the screen (user sees the update).
5. useEffect fires ASYNCHRONOUSLY — browser has already painted.

When useLayoutEffect is necessary:

• Measuring element dimensions and applying layout changes based on those measurements.
• Preventing visual flicker when you need to modify DOM before the user sees it.
• Syncing animations with layout position.

Common mistake: Using useLayoutEffect for data fetching. This blocks the browser and causes poor performance. Always use useEffect for async operations like API calls.

Rule: Always start with useEffect. If you see "flicker" or need to measure DOM before rendering — use useLayoutEffect.