Full lesson
Explore the full explanation, examples, and visuals at your own pace.
Counter.jsx
The button starts at zero, but a click doesn't change its text directly. Its handler gives React an updater that adds one, starting React's work to render and apply the necessary DOM change.
function Counter() {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>;
}One click starts an update
The button click runs Counter’s updater, which adds one and queues the state change with React. React then asks Counter to render with one. That’s a request to calculate the next UI, not an immediate change to the browser DOM.
Rendering describes the next UI
Running Counter with the updated count produces a new React element tree: the same button, now containing Count: 1. This virtual DOM description isn't the browser DOM; it describes what React intends to show.
Reconciliation finds the difference
React renders a new tree, then reconciliation matches the old and new buttons and identifies the displayed count changing from zero to one. During commit, only that necessary DOM text update is applied.
After one click, React renders the counter with one. What does reconciliation identify?
Let's think this through. After one click, React renders the counter with one. What does reconciliation identify? A: The existing button needs new displayed text. B: The entire button must be replaced. C: The click handler directly changed the DOM. Choose an answer, or just think it through. I'll explain in a moment.
- The existing button needs new displayed text
- The entire button must be replaced
- The click handler directly changed the DOM
After one click, React renders the counter with one. What does reconciliation identify?
The answer is A: The existing button needs new displayed text. The button has the same type and position in both rendered trees, so React can keep it and update its displayed text during commit. Calling the state setter requested the update; it did not edit the DOM itself.
- The existing button needs new displayed text
- The entire button must be replaced
- The click handler directly changed the DOM
Commit updates the browser DOM
During commit, React updates the text in the existing DOM button from zero to one. The button itself stays in place, and the browser can now display Count: 1.
A render does not guarantee a DOM change
React can render Counter without changing the DOM; rendering proposes UI, while commit applies only necessary mutations.
From state change to visible text
A queued counter update renders a proposed UI; reconciliation finds the change from zero to one, and commit applies it. Rendering itself is not a DOM update.