What it is
A virtual DOM is a lightweight JavaScript description of what the UI should look like. Instead of mutating the real DOM directly, a library builds a new virtual tree on each update.
Diffing
When state changes, the library compares the new virtual tree to the previous one. This comparison is called diffing. From the differences it computes a minimal set of real DOM operations to apply.
- Building plain objects is cheap compared to touching the real DOM.
- Batching updates avoids many separate reflows.
- The real DOM is patched only where it actually changed.
Tradeoffs
The virtual DOM is not automatically faster than hand written updates. Its value is a simple programming model: you describe the target UI and let the library reconcile.
Key idea
The virtual DOM trades a cheap in memory diff for fewer and smaller real DOM mutations, giving you a declarative model.