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.