Why is virtual DOM used?

JavaScriptMiddle~3 min read

1. What Virtual DOM is

Virtual DOM is a lightweight, virtual copy of the real DOM tree, kept in memory (in JS), not in the browser.

Every element on the page is represented as a plain JS object, for example:

javascript

{
  type: 'div',
  props: { className: 'card' },
  children: [
    { type: 'h1', props: { children: 'Title' } },
    { type: 'p', props: { children: 'Description' } }
  ]
}

This object is the "virtual DOM node" (VNode). It is not directly tied to the browser's DOM, so operations on it are very fast.

2. How Virtual DOM works (step by step)

Imagine an app is updating its UI:

The app changes state:

javascript

setCount(count + 1);

The framework builds a new Virtual DOM tree (based on the component's current state).
It compares the new tree with the previous one (diffing) -> figuring out what actually changed.
It updates only the changed nodes in the real DOM (with the minimum number of operations).

Example:

javascript

// Before
<div>
  <h1>Counter: 5</h1>
</div>

// After
<div>
  <h1>Counter: 6</h1>
</div>

React does not recreate the whole <div>, it sees that only the text node inside <h1> changed, and updates only that.

3. Why this is needed

Working with the real DOM is slow: every change triggers a reflow / repaint (recalculating styles, layout, and repainting).

Virtual DOM solves the problem like this:

Regular DOM	Virtual DOM
Changes touch the browser right away	Changes happen in memory
Every update triggers a reflow	The framework decides when to update the DOM
Updates must be managed manually	The algorithm optimizes the "diff" itself
Many small operations	A few "batches" of updates

4. Key advantages of Virtual DOM

Advantage	What it gives
Fewer DOM operations	Only real changes get updated
Re-render optimization	React/Vue compare the old and new tree
Convenient declarative UI	"What to render" instead of "how to update"
Platform independence	VDOM can render outside the browser too (React Native, SSR)
Update order invariance	No need to think about the sequence of manipulations

5. The comparison algorithm (diffing)

To figure out which nodes changed, Virtual DOM uses a diff algorithm.

It compares elements by key and type.
If type matches, it compares props and children.
If not, the old node is removed and a new one is created.
The algorithm is optimized, with roughly O(n) complexity.

Example:

javascript

<ul>
  <li key="1">A</li>
  <li key="2">B</li>
  <li key="3">C</li>
</ul>

If B is removed, React does not recreate C, because it has the same key, and it just "moves up".

6. Why Virtual DOM is still not "free"

Building and comparing virtual trees also takes time.
With very frequent updates (animations, canvas), VDOM can be slower.
That is why React/Vue use update batching (grouping updates per frame) and hooks like useMemo / PureComponent.

7. Alternatives and the evolution of the idea

Approach	Feature	Example
Virtual DOM (diff tree)	Updates the minimal parts	React, Vue 2
Incremental DOM	Generates patches directly, without a diff	Svelte (partially), lit-html
Compile-time diffing	Code compiles into optimal JS without a VDOM	Svelte, Solid.js
Fine-grained reactivity	Only a specific signal/cell changes	Solid.js, Vue 3 (composition API)

Modern frameworks are gradually moving away from a "global Virtual DOM" toward fine-grained reactivity (signal-based UI).

8. Short summary

What	Explanation
Virtual DOM	A JS representation of the real DOM in memory
Why	To reduce the number of direct DOM operations
How	Compares the old and new tree, updates only the changed parts
Pros	Faster, simpler, declarative
Cons	Not free, adds a layer of abstraction
Alternative	Svelte / Solid, no global VDOM (the compiler already knows what to change)

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.