How React diffs two virtual trees and surgically updates only what changed in the real DOM
The Virtual DOM is a lightweight JavaScript object representation of the real DOM tree. On every state change, React creates a new virtual DOM tree, diffs it against the old one (reconciliation), and applies only the minimum number of real DOM operations needed. This is why React is fast — DOM manipulation is expensive, virtual comparison is cheap.
📸 Old Virtual DOM (prev)before state change
🆕 New Virtual DOM (next)after state change
🔬 Diff Resultwhat changed
—
nodes skipped
—
text updates
—
nodes added
—
nodes removed
🛠 DOM Operations Queue (React batches and applies these to the real DOM)
Press "Run Reconciliation" to see the diff operations...
📐 Real DOM Mutations Appliedminimal surgical updates only