Measuring DOM Elements with useLayoutEffect

element.getBoundingClientRect() returns a DOMRect object with the element's size and position relative to the viewport: top, right, bottom, left, width, and height. It forces the browser to perform a layout calculation to return accurate values, so call it sparingly.

If you read getBoundingClientRect() in a useEffect, the browser has already painted. If you then set state based on the measurement, React re-renders and the browser paints again. Users may see the element briefly in its wrong position or size before the correction appears in the second paint.

Reading measurements in useLayoutEffect happens after DOM mutations but before paint. Any state update triggered by the measurement causes React to re-render synchronously and commit the corrected DOM — all before the browser has painted anything. The user sees only the final, correct result in a single paint cycle.

A tooltip needs to appear near its trigger element. Measure the trigger element's position in useLayoutEffect using getBoundingClientRect(), compute the tooltip's absolute position, and set that position in state. The tooltip renders in the correct location on the very first paint, with no visible jump from a wrong initial position.

To animate an element from its natural (unconstrained) size to a fixed size, you need to know the natural size before applying the constraint. Read the element's height in useLayoutEffect before any animation style is applied, store it in state, and then use it as the starting keyframe value for your CSS transition.

When a page has a sticky header, body content needs top padding equal to the header height to avoid being hidden behind it. Measure the header height in useLayoutEffect using a ref: headerRef.current.getBoundingClientRect().height. Set this as the paddingTop on the content container. The layout is correct from the first render.

When you call setState inside useLayoutEffect, React immediately runs another render and commit cycle in the same synchronous block. This re-render also runs its useLayoutEffect. Be careful not to create an infinite loop: only update state if the new measurement differs from the current state value.

On the server, DOM elements do not exist, so getBoundingClientRect() would throw or return zeros. Guard your useLayoutEffect with a check: if (typeof window === 'undefined') return;. For SSR apps, you may need to hydrate with a placeholder size and measure after hydration on the client.

One-time measurement with useLayoutEffect gives you the size at mount time. For tracking size changes as the element resizes (due to window resize, dynamic content, or CSS changes), use ResizeObserver instead. It fires a callback whenever the element's size changes, making it more suitable for responsive components.

If multiple effects need the same measurement, compute it once and share it via context or by passing it down as props. Computing the same getBoundingClientRect() value in multiple useLayoutEffect calls triggers multiple synchronous layout reads, each of which is relatively expensive. Consolidate measurements when possible.

Refs are populated before effects run. When useLayoutEffect fires, ref.current is guaranteed to point to the DOM element. This is why the pattern works: useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, []). The ref is never null inside a layout effect on a mounted component.

Why is it better to call getBoundingClientRect() in useLayoutEffect than in useEffect?

Use getBoundingClientRect() in useLayoutEffect to read DOM measurements after mutations but before paint. State updates from these measurements cause a synchronous re-render included in the same paint, preventing flicker. Guard against SSR with a typeof window check. For ongoing size tracking, prefer ResizeObserver.