useEffect vs useLayoutEffect
Execution order
text
Render -> DOM mutations -> useLayoutEffect -> Browser paints -> useEffectuseEffect | useLayoutEffect | |
|---|---|---|
| When | After paint (async) | Before paint (sync) |
| Blocks browser | No | Yes |
| SSR | Doesn't run on the server | Doesn't run on the server (the SSR warning was removed in React 19) |
When to use useLayoutEffect
- You need to measure DOM element dimensions (
getBoundingClientRect). - You need to synchronously update the DOM to avoid visual flickering.
tsx
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setHeight(height); // before paint - user won't see a jump
}, []);Rule: use
useEffectby default. Switch touseLayoutEffectonly when you see visible visual artifacts.
updated
did you know it?