Measure a tooltip before the browser paints
The button sits 16px from the top of the page, and the tooltip needs 40px, so it doesn't fit above. The layout effect measures and switches to below, and React re-renders before the first paint: the user never sees the tooltip cut off at the top.
useLayoutEffect runs after React updates the DOM but before the browser paints, so you can measure elements and fix the layout without a visible flicker, at the cost of blocking the paint; useInsertionEffect runs even earlier and exists for CSS-in-JS libraries to insert styles.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a component that renders a <textarea> and, in a layout effect depending on value, sets its height to its scrollHeight so it grows with the text.
Which hook would you use to log a page view, and which to scroll a chat list to the bottom before the new message is shown? Why?
Explain it without notes
How does useLayoutEffect differ from useEffect, and when would you choose it?
Explain how a tooltip can measure itself and reposition without the user seeing a jump.
What happens to useLayoutEffect during server rendering in React 19?
What is useInsertionEffect for, and why does it run before layout effects?
Preview
Console
Nothing logged yet.Expected console output
render, placement = above
layout effect: tip is 40px tall, 16px of space above
render, placement = below