The Virtual DOM Explained: What Problem It Actually Solves
Not about speed for its own sake — it's what makes 'describe the result, don't write the mutations' actually practical to implement.
"React is fast because of the virtual DOM" is the most repeated half-truth in frontend. The virtual DOM isn't primarily a performance trick — direct, targeted DOM manipulation can outperform it in a benchmark. What it actually solves is a much more practical problem: how do you let a developer write "here's what the UI should look like" and have the framework figure out the minimal real DOM changes, without the developer ever computing a diff by hand.
What it actually is
A virtual DOM node is a plain JavaScript object describing an element — tag, props, children — not a real, expensive browser DOM node. On every state change, React builds a new tree of these lightweight objects (cheap, because they're just objects, not real DOM), compares it against the previous tree (the "diff"), and computes the minimal set of real DOM operations needed to reconcile the two — then applies only those.
// Conceptually, on every state update:
const newTree = renderComponentTree(currentState);
const patches = diff(previousTree, newTree); // minimal real DOM ops
applyPatches(realDOM, patches);
prevousTree = newTree;The actual problem this solves
Without it, "UI as a function of state" would mean re-rendering the ENTIRE real DOM subtree on every state change — destroying and recreating every real node, losing focus state, scroll position, input values, and being genuinely, measurably slow, because real DOM nodes are expensive browser objects with layout and paint costs attached. The virtual DOM is the mechanism that makes the declarative programming model ("describe the result") compatible with acceptable real-world performance ("touch only what actually changed") — it's the bridge between the two, not a speed hack layered on top.
Why this explains the `key` prop
The diffing algorithm needs a way to tell "this list item moved" apart from "this item was deleted and a new one created" — without `key`, React falls back to comparing by position, which misattributes state (a text input's typed value, a checkbox's checked state) to the wrong item when a list reorders. `key` gives the diff algorithm a stable identity to track across renders — it's not a React formality, it's the actual information the reconciliation algorithm needs to do its job correctly.