Same data. Same screen. One order changes status every 1.2s.
The counters below are real browser DOM operations, measured with a
MutationObserver. Let it run for 30 seconds, then look again.
😵 Naive: redraw everything
container.innerHTML = buildWholeTable(orders)
0DOM operations since load
🧠 React: diff, then touch one cell
root.render(<Board orders={'{orders}'} />)
0DOM operations since load
What React actually does: it keeps a lightweight copy of the UI in plain
JavaScript objects (the "virtual DOM"), compares the new copy with the old one,
works out the smallest set of real changes, and applies only those.
You describe what the screen should look like. React works out
what to touch. That is the whole trade.