Measure and position visual elements
A tooltip or popover needs its DOM dimensions to calculate a position before becoming visible.
React 19+ · Hook
useLayoutEffect
useLayoutEffect runs before the browser repaints, making it suitable for layout reads and visual corrections that must not flicker. Prefer useEffect unless the work must happen before paint.
How it works
useLayoutEffect runs after React commits DOM changes but before the browser repaints. Use it when a visual effect must synchronously read layout and possibly update state before the user sees the result; otherwise prefer useEffect.
Syntax
useLayoutEffect(setup, dependencies?)Parameters
| Name | Type | Description |
|---|---|---|
setup | () => void | (() => void) | Function containing the effect logic; it may optionally return a cleanup function. |
dependencies | DependencyList | Optional inline list of reactive values referenced by setup. |
Returns
undefined
Key points
- Use it for visual work that must finish before paint, such as measuring or positioning an element.
- A common pattern is to read an element's geometry, store the result in state, and render using that measurement.
- Return cleanup code when the effect subscribes, attaches listeners, or otherwise needs to undo external work.
- Include every reactive value used by setup in the dependency list so the measurement or synchronization stays current.
- Use the Hook for its side effects; it does not produce a value for the component to consume.
Common mistakes
- Call the Hook only at the top level of a component or custom Hook; move conditional behavior into the effect or extract a component.
- Do not depend on this Hook for server-rendered measurements or other server-side effects.
- Because its code and state updates block repainting, reserve it for effects that genuinely need to run before paint.
Example: Measure a tooltip before paint
import { useLayoutEffect, useRef, useState } from "react";
export default function Tooltip() {
const ref = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(0);
useLayoutEffect(() => {
setHeight(ref.current?.getBoundingClientRect().height ?? 0);
}, []);
return <div ref={ref} style={{ top: -height }}>Tooltip</div>;
}Measures the tooltip before the browser paints, allowing its position to use the measured height without a visible intermediate layout.
When to use it
Synchronize rendering with DOM geometry
A component must read an element's bounding box immediately after commit and use it to render a corrected layout.
Coordinate layout-sensitive integrations
An external visual system requires setup and teardown that must occur before repaint.
Interview questions
QWhat distinguishes useLayoutEffect from useEffect?
useLayoutEffect is the layout-sensitive counterpart to useEffect. It runs before the browser repaints, so it can measure DOM layout and update state before the user sees the result.
Follow-up: When should useEffect be preferred? Prefer it for ordinary side effects, because useLayoutEffect blocks painting and can make the app slower.
QHow do setup and dependencies control this Hook?
The setup function contains the effect logic and may return cleanup logic. The optional dependency list contains reactive values referenced by setup; React reruns the effect when those dependencies change.
Follow-up: What should the dependency list look like? It should have a constant number of items and be written inline, such as [dep1, dep2].
QWhat server-rendering limitation applies?
Effects run only on the client, not during server rendering. Therefore, layout measurements must happen after the component is available in the browser.
Follow-up: What alternative avoids blocking the initial paint? Replace useLayoutEffect with useEffect when an initial visual adjustment does not need to happen before paint.
Related
useEffectuseRefuseState