FrontendHaltReact·Intermediate·Coding·1 min read
What is the difference between useEffect and useLayoutEffect?
Short interview answer
useEffect generally runs after the browser paints, while useLayoutEffect runs after DOM commit but before paint and can block it. Layout effects are for synchronous measurement or mutation that must be visually atomic; ordinary synchronization should use useEffect.
Example
useLayoutEffect(() => { const { height } = ref.current.getBoundingClientRect(); setTooltipTop(-height); // measured + applied before the user sees a flash}, [content]);Key takeaway
Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.