⚛️ React useLayoutEffect() Hook

? Quick Overview

⚛️ React Hook

useLayoutEffect() is a React Hook that runs synchronously after React has updated the DOM but before the browser paints the screen. This gives you a small window to read layout values or adjust the DOM before the user actually sees the update.

• Ideal for layout measurements, synchronized animations, and DOM tweaks.
• Runs earlier than useEffect(), so it can block paint if overused.
• Should be used only when you truly need layout-synchronous logic.

? Key Concepts

• Timing: Runs after DOM mutations but before the browser paints the new frame.
• Synchronous: Blocks painting until the effect callback finishes.
• DOM-focused: Great for reading sizes, positions, and scrolling values.
• Cleanup: You can return a cleanup function to reset styles, listeners, or timers.
• Performance-sensitive: Heavy work here can make the UI feel janky or frozen.

? Syntax & Behavior

The signature of useLayoutEffect() is the same as useEffect(), but its execution timing is different.

// Basic useLayoutEffect syntax with cleanup
useLayoutEffect(() => {
// Read layout or perform DOM updates before paint
return () => {
// Cleanup runs before the next layout effect or unmount
};
}, [dependencies]);

• Runs after React updates the DOM, but before the browser performs the paint.
• Use dependencies to control when the effect should re-run.
• Use cleanup to avoid memory leaks and to reset any DOM changes or listeners.

? Example 1: Measuring DOM Layout

In this example, we measure the width of a box right after it renders, using getBoundingClientRect().

// Measure a box width immediately after layout
function Box() {
const boxRef = React.useRef(null);
React.useLayoutEffect(() => {
const box = boxRef.current;
console.log("Box width:", box.getBoundingClientRect().width);
// Logs the final width before the browser paints
});
return (
<div
ref={boxRef}
style={{
width: "200px",
height: "100px",
backgroundColor: "#007bff",
margin: "20px auto"
}}
></div>
);
}

Because useLayoutEffect() runs before paint, the width you read is fully up to date with the latest DOM changes, and the user never sees any intermediate flicker.

? Example 2: useEffect vs useLayoutEffect

This demo logs when each Hook runs so you can compare their timing in the console.

// Compare timing of useEffect and useLayoutEffect
function Demo() {
React.useEffect(() => {
console.log("? useEffect called (after paint)");
});
React.useLayoutEffect(() => {
console.log("⚡ useLayoutEffect called (before paint)");
});
return <h5 className="text-center">Check the console logs</h5>;
}

In the console, you will see the useLayoutEffect log first, followed by the useEffect log. This confirms that useLayoutEffect() blocks paint until it finishes, whereas useEffect() runs later, asynchronously.

? Example 3: Synchronized Animation

Here we use useLayoutEffect() to synchronize inline styles for a smooth resize animation.

// Smoothly grow a box by syncing styles before paint
function AnimatedBox() {
const boxRef = React.useRef(null);
const [size, setSize] = React.useState(100);
React.useLayoutEffect(() => {
const el = boxRef.current;
el.style.transition = "all 0.5s ease";
el.style.width = size + "px";
el.style.height = size + "px";
}, [size]);
return (
<div className="text-center">
<div
ref={boxRef}
style={{ backgroundColor: "#28a745", margin: "20px auto" }}
></div>
<button className="btn btn-primary" onClick={() => setSize(size + 50)}>
Grow Box
</button>
</div>
);
}

Because the style changes are applied in useLayoutEffect(), the browser can compute the new layout before painting, producing a smooth transition with no visible jump in size.

? useEffect vs useLayoutEffect Comparison