Suggest an edit

Improve this article

Refine the answer for “What does Virtual DOM do?”. 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)

**Virtual DOM** is a **virtual representation of the user interface** (UI) in memory that React uses to **optimize how it works with the browser's real DOM**.

In simpler terms:
React **does not work directly with the real DOM**,
it first updates **its copy in memory**, compares the changes,
and only then **minimally updates the real DOM**.

---

## How it works, step by step

1. **A component returns JSX:**

```javascript
  function App() {
    return <h1>Hello, world!</h1>;
  }
  ```
2. React **converts the JSX** into a **JavaScript object**, a virtual tree:

```javascript
  {
    type: 'h1',
    props: { children: 'Hello, world!' }
  }
  ```
This is the **Virtual DOM**, a lightweight, internal structure describing the UI.
3. When state changes (`setState`, `useState`, etc.):
  - React **builds a new virtual tree** (a new snapshot of the interface);
  - **compares** it with the previous one (via the **diffing / reconciliation** algorithm);
  - **finds the differences** and **updates the real DOM nodes precisely**.
4. As a result, React **does not repaint the whole DOM**,
only **the elements that actually changed**.

---

## Example (on an intuitive level)

Say we have this component:

```javascript
function Counter({ count }) {
  return (
    <div>
      <p>Counter: {count}</p>
      <button>+</button>
    </div>
  );
}
```

When `count` changes from `1` → `2`:

- React builds a **new virtual tree**,
- compares it with the previous one,
- sees that **only the text** inside `<p>` changed,
- updates **only that text node** in the real DOM.

Without the Virtual DOM, React would have to **rebuild the entire** `<div>`,
which is expensive and slow.

---

## Why this is needed

Working with the real DOM is:

- slow (every access is a call into the browser's tree);
- causes **reflow / repaint** (style recalculation and repainting);
- can "lag" with frequent changes.

The Virtual DOM solves this:

- All the computation happens **in memory (JS objects)**.
- React then applies the changes to the DOM **in one batch**.
- This **speeds up rendering** and keeps the interface smooth.

---

## Key advantages

| Advantage | Description |
|---|---|
| Faster than working directly with the DOM | Updates happen in memory, not the browser |
| Convenience of declarative code | The developer just "describes" **what** they want to see |
| Easy UI updates | React itself figures out **what and where** needs to change |
| Fewer bugs | Less direct work with the DOM API and element state |

---

## The "reconciliation" algorithm

This is the mechanism React uses to:

1. Compare the old and new virtual trees.
2. Determine which parts of the interface changed.
3. Update only those parts in the real DOM.

React uses **keys (**`key`**)** and the **Fiber architecture**
to make this process **asynchronous and interruptible** (starting with React 16+).

---

## Important to understand

- The Virtual DOM is **not a browser standard**, it's an **internal mechanism of React** (and similar libraries).
- It doesn't make updates "magically instant",
but it **smartly minimizes unnecessary operations on the real DOM**.

---

## A simple metaphor

Imagine you're editing a document:

- The real DOM is a **paper copy**, slow to write on.
- The Virtual DOM is a **draft on a computer**.
You make all the edits in memory,
then **print only the pages that changed**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.