When should we use useLayoutEffect instead of useEffect?

useLayoutEffect is used when you want to update how the webpage looks right after it’s rendered. This ensures that changes happen immediately before the browser shows anything on the screen. It’s crucial for tasks like measuring element sizes or positioning elements accurately based on their layout.

Why we should use useLayoutEffect instead of useEffect ?:

• Immediate DOM Updates: useLayoutEffect is useful when you need to make DOM updates immediately after rendering, ensuring that these updates happen synchronously before the browser paints any changes on the screen.
• Accurate Measurements: It’s particularly handy for tasks like measuring element dimensions or computing layout information based on the DOM’s current state.
• Responsive Styling: With useLayoutEffect, you can update styles or layout calculations based on real-time DOM measurements, ensuring a responsive user interface.
• Avoiding Visual Glitches: By synchronously updating the DOM before painting, useLayoutEffect helps prevent visual glitches or layout inconsistencies that might occur if these updates were delayed.
• Consideration for Performance: While powerful, useLayoutEffect should be used judiciously, especially for complex or expensive operations, to avoid blocking the main thread and impacting performance negatively.

Example: Below is the example of using useLayoutEffect instead of useEffect.

Javascript

import React, {
    useState,
    useLayoutEffect
} from 'react';

function ExampleComponent() {
    const [width, setWidth] = useState(0);

    useLayoutEffect(
        () => {
            // This effect runs before the browser paints changes
            console.log('useLayoutEffect - Component rendered');
            setWidth(
                document.documentElement.clientWidth
            );
            return () => {
                console.log('useLayoutEffect - Cleanup');
            };
        }
    );

    return (
        <div>
            <p>
                Window Width: {width}px
            </p>
        </div>
    );
}

export default ExampleComponent;

Output:

Output