Watch exactly which DOM nodes React changes
Re-render only: App rendered, but its output was identical, so React committed nothing. Add: React changed one text node, the number. The heading, buttons and paragraph element were not touched.
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
render: count = 0 | ticks = 0
render: count = 0 | ticks = 1
tick: DOM changes = 0 []
render: count = 1 | ticks = 1
add: DOM changes = 1 [ 'characterData on #text -> "1"' ]