One click, one re-render — how React changes the screen — Visualize

One click, one re-render — how React changes the screen

Follow a single click from setState to the one DOM node that actually changes.

💡

THE BIG IDEA

You clicked +1 and the number changed. Between those two moments, React ran a five-stage pipeline: write the state shelf, re-run your component, build a fresh tree of cheap objects, diff it against the old tree, and patch the ONE real DOM node that differs. Watch it happen — and watch the famous mysteries (why console.log shows the old value, why the whole function re-runs, why React is still fast) dissolve into machinery.

Press ▶ Play to watch it run step by step, or use the arrow buttons to go at your own pace.

The app is on screen: a heading, the number 0, a +1 button. React is doing nothing — no loop, no polling. It is waiting.

React only ever works when something ASKS for a render. The old tree from the last render is kept in memory, ready to be compared against.

👆You (a click)

🗃️State (React’s shelf)

⚛️Counter() — your function

🌱New element tree

🌳Old tree (kept from last render)

🔍Reconciliation (the diff)

🖥️Real DOMcount = 0

handling requestunder loadhealthyjust added

1/8

UP NEXT IN REACT

useEffect timing — built from scratch, painted first

Queue the effect, paint the screen, clean up the old world, then connect the new one — in 18 runnable lines.

React Router — navigation without the white flash useEffect timing — built from scratch, painted first