What is the useLayoutEffect Hook in React?
Learn what React's useLayoutEffect Hook does, how it differs from useEffect, when it runs before paint, and how it prevents layout flicker, with code examples.
Expected Interview Answer
useLayoutEffect is a React Hook that runs synchronously after the DOM has been mutated but before the browser paints the screen, letting you read layout and re-render without the user seeing a flicker.
It has the same signature as useEffect but fires at a different time: useEffect runs asynchronously after paint, while useLayoutEffect runs synchronously before paint, blocking the browser until it finishes. This makes it the right choice for measuring DOM nodes (offsetWidth, scroll position) and immediately applying style changes based on those measurements, so the correction is painted in the same frame. Because it blocks painting, overusing it hurts performance, so it should be reserved for genuine visual layout work.
- Prevents visible flicker for layout-dependent updates
- Reads DOM measurements before the browser paints
- Applies synchronous style corrections in the same frame
- Ideal for tooltips, popovers and animations needing exact positions
- Shares the same cleanup and dependency model as useEffect
AI Mentor Explanation
Picture the third umpire freezing the live broadcast the instant a ball is caught, checking the replay for a no-ball, and only then letting the feed resume so viewers never see a wrong decision on screen. useLayoutEffect works the same way: it pauses the paint, measures the DOM, corrects it, and only then releases the frame to the audience.
Step-by-Step Explanation
Step 1
Import the hook
Bring in useLayoutEffect from React, alongside useRef when you need a DOM node to measure.
Step 2
Attach a ref
Put a ref on the element whose size or position you need to read after render.
Step 3
Measure inside the effect
In useLayoutEffect, read layout values like offsetHeight or getBoundingClientRect from the ref.
Step 4
Apply the correction
Set state or mutate style based on the measurement; React re-renders before the browser paints.
Step 5
Return a cleanup
Optionally return a cleanup function to undo listeners or measurements, just like useEffect.
What Interviewer Expects
- Knows it runs synchronously before paint, unlike useEffect
- Can explain the flicker problem it solves
- Mentions DOM measurement use cases (tooltips, animations)
- Understands the performance cost of blocking paint
- Aware of SSR warnings when using it on the server
Common Mistakes
- Using it as a default instead of useEffect for non-visual work
- Claiming it runs after the browser paints
- Ignoring the SSR warning and layout mismatch it causes
- Doing heavy async work inside it and blocking the frame
- Confusing its timing with componentDidMount's exact behaviour
Best Answer (HR Friendly)
“useLayoutEffect is a React tool that lets developers measure and fix how something looks on screen just before the page is drawn, so users never see a flicker or jump. It is like a last-second quality check before the picture is shown.”
Code Example
import { useLayoutEffect, useRef, useState } from 'react'
function Tooltip({ text }) {
const ref = useRef(null)
const [top, setTop] = useState(0)
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect()
// Position the tooltip above its anchor before the browser paints
setTop(-height - 8)
}, [text])
return (
<div ref={ref} style={{ position: 'absolute', top }}>
{text}
</div>
)
}Follow-up Questions
- How does useLayoutEffect differ from useEffect in timing?
- Why does useLayoutEffect trigger a warning during server-side rendering?
- When would blocking the paint actually hurt performance?
- How does this hook relate to the old componentDidMount lifecycle?
- How can you avoid useLayoutEffect while still preventing flicker?
MCQ Practice
1. When does useLayoutEffect run relative to the browser paint?
useLayoutEffect fires synchronously after DOM mutations but before the browser paints, which is what lets it prevent flicker.
2. Which use case best justifies useLayoutEffect over useEffect?
Reading layout measurements and correcting them before paint is the canonical reason to reach for useLayoutEffect.
3. What is a downside of using useLayoutEffect too broadly?
Because it runs synchronously before paint, heavy work inside it delays the frame and degrades performance.
Flash Cards
useLayoutEffect timing? — Synchronously after DOM mutations but before the browser paints.
useEffect vs useLayoutEffect? — useEffect runs after paint (async); useLayoutEffect runs before paint (sync).
Primary use case? — Measuring DOM layout and applying corrections without a visible flicker.
Main drawback? — It blocks painting, so overuse hurts performance; also warns during SSR.