useLayoutEffect
Fires synchronously after DOM mutations but before the browser paints.
Syntax
useLayoutEffect(setup, dependencies?)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
setup | function | Yes | Effect run synchronously after DOM updates; may return a cleanup function. |
dependencies | array | No | Reactive values; the effect re-runs when any change. |
Returns
undefined — useLayoutEffect returns nothing.
Examples
useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height);
}, []);
Notes
Runs before paint, so it can measure layout and apply DOM changes without a
visible flicker. It blocks painting and hurts performance if overused; prefer
useEffect when synchronous timing is not required. It does not run on the
server and will warn during SSR.