useEffect vs useLayoutEffect: What's the Difference?
Both run side effects after render, but the timing is different — and that difference decides which one you should reach for. In almost every case the answer is useEffect.
The one-line difference
useEffect runs asynchronously, AFTER the browser paints. useLayoutEffect runs synchronously after the DOM is mutated but BEFORE paint, so it blocks the screen from updating until it finishes.
When you actually need useLayoutEffect
Only when you must read layout (measure a node with getBoundingClientRect) and change it before the user sees a flicker — e.g. positioning a tooltip. Because it blocks paint, overusing it hurts performance.
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setHeight(height); // adjust before paint -> no visible jump
}, []);Master React rendering in the React Kit
Effects, the render/commit phases, and every hook — explained with interview context in the React Interview Kit.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- Does useLayoutEffect run on the server?
- No — it warns during SSR because there's no layout to measure. Use useEffect for anything that must run during server rendering, or guard useLayoutEffect to the client.
- Which should I default to?
- useEffect. Reach for useLayoutEffect only to fix a visible flicker that depends on measuring the DOM.