What is the virtual DOM, and does it always make things faster?
Quick Answer
The virtual DOM is a lightweight JS representation of the UI. On a state change, the framework builds a new vDOM tree, diffs it against the old one, and applies only the minimal set of real DOM changes. It's not automatically faster than hand-tuned DOM code — its value is a simple mental model (“describe the UI as a function of state”) with good enough performance.
The virtual DOM is a plain-object description of what the UI should look like. When state changes, the framework produces a new one, compares it to the previous one, and works out the smallest set of real DOM operations to get from A to B. The reason it exists isn't raw speed — hand-written DOM updates can be faster — it's that it lets you write your UI as a function of your state and not think about the imperative updates, while still being fast enough. Vue's compiler is clever about it too: it marks which nodes are dynamic at build time so the diff can skip everything static.
- The real cost is direct DOM manipulation and layout; batching and minimising those is the win.
- Vue 3's compiler does static hoisting and patch flags — it knows at compile time which parts are dynamic, so diffing skips the static bits.
- Svelte and Solid skip the vDOM entirely, compiling to targeted DOM updates — often faster, different trade-offs.