useEffect vs useLayoutEffect — what's the difference?
Quick answer
useEffect runs asynchronously after paint; useLayoutEffect runs synchronously after DOM mutations but before paint. Use the latter only to measure layout and avoid flicker.
In detail
Most effects should use useEffect so they don't block painting. useLayoutEffect fires before the browser paints, so it's the right choice when you must read DOM geometry (measure a node) and adjust before the user sees a flash. Because it blocks paint, overusing it hurts performance.
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setHeight(height); // adjust before paint -> no visible jump
}, []);Why interviewers ask this: A deeper hooks question for senior front-end roles.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399