Measure a box before the browser paints
The box takes whatever space is left in its row after the 40 px icon and the 10 px gap, so its width is decided by layout, not by your code. The layout effect reads it after the commit and before the paint, so the screen never shows measuring….
Put a ref on a JSX element with the ref attribute and React stores the real DOM node in ref.current after the commit, so you can focus it, scroll it into view or measure it; for a whole list of elements, use a callback ref that fills a Map.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a chat box: a list in a scrolling container and an input. After each new message is added, scroll the container to the bottom.
Make a CopyField with a read-only input and a Copy button that selects all the text in the input.
Explain it without notes
How do you get a DOM node in React, and when is it available?
When does React set a ref to null?
How do you keep refs to a list of elements whose length changes?
What can you safely do with a DOM ref, and what shouldn't you do?
Preview
Console
Nothing logged yet.Expected console output
200 × 40 px
350 × 40 px