Suggest an edit

Improve this article

Refine the answer for “Why is virtual DOM used?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. **The app changes state:**

```javascript
  setCount(count + 1);
  ```
2. **The framework builds a new Virtual DOM tree** (based on the component's current state).
3. **It compares the new tree with the previous one (diffing)** -> figuring out **what actually changed**.
4. **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) |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts714 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.