Re-rendering keeps what the user typed
The second root.render is a re-render of the same tree. React kept the <h1> and the <input> nodes, changed the time text only, and the typed note and the focus survived. (Real apps update with state, not repeated root.render calls; this just makes the trigger visible.)
Every screen update goes through three steps: something triggers a render (the first mount or a state change), React renders by calling your components to work out what should change, and React commits by touching only the DOM nodes that differ; then the browser paints.
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.
A component logs render each time it runs. A button calls setName("Asha") when name is already "Asha", and another calls setName("Ravi"). Describe what happens in render and commit for each button.
List the steps for this event: the user clicks "Like", which calls setLikes(likes + 1) in Post, and Post renders a <LikeButton> and a <Comments> child.
Explain it without notes
Name the steps React goes through to update the screen and what happens in each.
What are the two things that trigger a render?
What does React do to the DOM on a re-render where only one number changed?
Why does text in an <input> survive when its parent re-renders?
Preview
Console
Nothing logged yet.Expected console output
Clock rendered with 10:00:00
Clock rendered with 10:00:01
same <h1>? true | text: 10:00:01
input still says: my note
input still focused? true