What is the Virtual DOM, and does it make applications faster?

The Virtual DOM is a lightweight JavaScript description of what the UI should look like. When state changes, the library builds a new tree, diffs it against the previous one, and applies only the differences to the real DOM — a process called reconciliation.

The honest answer to whether it is faster is: not compared to hand-written, perfectly targeted DOM updates. Touching the DOM directly with full knowledge of what changed will always beat diffing. What the Virtual DOM actually buys you is a programming model: you describe the UI as a function of state and never write imperative update code, and the library guarantees the result is fast enough by batching updates and avoiding the naive alternative of rebuilding everything.

Worth knowing: several modern frameworks have dropped it. Svelte compiles updates at build time, and Solid uses fine-grained reactivity to update exactly the nodes that depend on a changed signal. Both are faster than diffing, which is good evidence that the Virtual DOM is a means rather than an end.

Note: The keys prop follows directly from this. Keys let the diff match elements across renders; using an array index as a key breaks that matching when the list reorders, and state ends up attached to the wrong item.