Hooksintermediate
useLayoutEffect vs useEffect
Understand the timing difference between useLayoutEffect and useEffect, and when the synchronous variant is necessary.
Both useLayoutEffect and useEffect let you run side effects after render, but they differ in timing relative to the browser painting the screen. useEffect runs asynchronously after the browser has painted, while useLayoutEffect runs synchronously after React has applied DOM mutations but *before* the browser paints.
useLayoutEffect is like adjusting a picture frame on the wall before letting anyone into the room to look at it; useEffect is like letting guests in first and then straightening the frame a moment later — usually fine, but noticeable if the frame was really crooked.
Key Concepts
1
This timing difference matters when an effect needs to measure or mutate the DOM in a way that should be invisible to the user — for example, measuring an element's size and then adjusting its position before the user ever sees the unadjusted version. Using useEffect for this would cause a visible flicker, since the browser paints the 'wrong' layout first and then a moment later reflows to the corrected one.
useEffect
2
Because useLayoutEffect blocks the browser from painting until it finishes, using it for anything expensive can hurt perceived performance — it's a deliberate tradeoff of blocking paint briefly in exchange for avoiding visual flicker. React's own documentation recommends defaulting to useEffect and only reaching for useLayoutEffect when a measurable flicker or layout thrash is observed.
useLayoutEffectuseEffect
3
Interviewers like this topic because it distinguishes candidates who've only memorized 'they're basically the same' from those who understand the render-commit-paint pipeline and can name a concrete flicker bug that useLayoutEffect fixes.