The order: insertion, layout, paint, effect
First the component is rendered to an HTML string the way a server would: it renders, but no effect of any kind runs, and React 19 prints no warning. In the browser all three run, in this order.
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, h = 0
<div style="height:40px">box</div>
--- client
render, h = 0
insertion effect
layout effect
effect