useLayoutEffect for Pre-Animation Measurements

Sometimes an element visibly jumps or flickers on its first render before settling into place. This usually happens when you measure or reposition an element after the browser has already painted it.

The user sees the wrong position for one frame, then a sudden correction, which looks broken.

useEffect runs after the browser paints. So if you read a measurement and update the DOM inside useEffect, the user has already seen the un-corrected frame before your change applies.

For visual positioning that must be invisible to the user, after-paint timing is too late.

useLayoutEffect runs synchronously after React mutates the DOM but before the browser paints. Any DOM read or write you do there is committed before the user sees a single frame.

This makes it the right tool for measurements and positioning that must appear instantly correct.

Inside useLayoutEffect you can read an element layout with ref.current.getBoundingClientRect() to capture its position and size before animating.

Because this runs pre-paint, you can both measure and apply a starting transform without any visible flash.

FLIP stands for First, Last, Invert, Play. You record the element First position, let it move to its Last position, then Invert by applying a transform that visually puts it back at First, and finally Play by removing the transform so it animates to Last.

This lets you animate layout changes using only cheap transform, even though the real layout jumped instantly.

The key reads happen in useLayoutEffect: capture the First rect before the change and the Last rect after, then compute the delta. Doing this pre-paint guarantees the inverted transform is in place before anything is shown.

The difference between the two rects gives you the exact translate and scale to invert.

You set the inverting transform synchronously inside useLayoutEffect, then on the next frame remove it so the element animates to its natural spot. Often you trigger the play step with requestAnimationFrame.

Because the invert was applied before paint, the user never sees the element at its raw Last position.

On the server there is no DOM, so React logs a warning that useLayoutEffect does nothing during server rendering. Layout effects only make sense in the browser.

This warning signals that the effect cannot run where there is nothing to measure.

If a component must run on the server, use useEffect combined with requestAnimationFrame to do your measurement before the next paint, or conditionally use useLayoutEffect only in the browser.

This avoids the warning while still getting close-to-pre-paint timing for non-critical animations.

A height animation is a classic case: measure the collapsed and expanded heights in useLayoutEffect, then animate between explicit pixel values so the transition is smooth.

Because auto height is not animatable, measuring the real height first lets you transition to a concrete number.

Default to useEffect for most work. Use useLayoutEffect only when you read layout and must mutate the DOM before paint to avoid a visible flash.

Overusing it can hurt performance because it blocks painting until it finishes.

Test your understanding of effect timing.

You learned that the flash problem comes from measuring after paint, that useLayoutEffect runs pre-paint, and how the FLIP technique animates layout changes with cheap transforms.

You also saw the SSR warning and a useEffect plus requestAnimationFrame fallback.