Virtual DOM

In Turkish: Sanal DOM
Pronunciation: VUR-choo-ul DAHM

Updated September 30, 20263 min read

In short

The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.

What is the virtual DOM?

The virtual DOM is a representation of the user interface made of plain JavaScript objects that mirrors the structure of the real DOM, the browser's tree of page elements. Instead of changing the page directly, a UI library such as React or Vue builds a new virtual DOM tree whenever the app's data changes and then works out what actually needs to change on the page.

The process has three steps. First, the library renders a new virtual tree from the current state; second, it compares that tree with the previous one, a step called diffing (React calls the whole process reconciliation). Third, it applies only the differences to the real DOM, for example updating the text of one list item instead of rebuilding the whole list, and keys such as React's key prop help it match list items that moved.

It's like an architect editing a blueprint and then sending the builders a short list of changes, instead of tearing down and rebuilding the house after every revision. The main benefit is for developers: you describe what the UI should look like for a given state, and the library figures out the DOM operations, which avoids many bugs that come from updating the page by hand.

A common misconception is that the virtual DOM is faster than the real DOM. Carefully targeted direct DOM updates are faster, because diffing adds extra work; the virtual DOM is a trade-off that keeps updates reasonably fast while letting you write declarative code, and frameworks such as Svelte and Solid skip it entirely by compiling components or tracking fine-grained changes. The virtual DOM is also unrelated to the shadow DOM, a browser feature that isolates a web component's markup and styles.

Key takeaways

The virtual DOM is an in-memory JavaScript copy of the page's element tree.
Libraries diff the new virtual tree against the old one and update only what changed.
Its main benefit is declarative code, not raw speed over hand-written DOM updates.
Keys help the diffing algorithm track list items that are added, removed, or moved.
It is different from the shadow DOM, which isolates web component markup and styles.

Example

Two virtual DOM trees and the single change between themjavascript

// A virtual DOM node is just a plain object describing an element
const oldTree = { type: "ul", children: [
  { type: "li", key: "a", text: "Milk" },
  { type: "li", key: "b", text: "Eggs" },
]};

const newTree = { type: "ul", children: [
  { type: "li", key: "a", text: "Milk" },
  { type: "li", key: "b", text: "Eggs (12)" }, // only this changed
]};

// Diffing finds one change, so only one real DOM update is needed:
// secondListItem.textContent = "Eggs (12)";

Readers ask

Is the virtual DOM faster than the real DOM?

Not by itself. Diffing adds work compared with perfectly targeted DOM updates; the virtual DOM's value is that it keeps updates reasonably efficient while letting you write simple, declarative UI code.

What is the difference between the virtual DOM and the shadow DOM?

The virtual DOM is a JavaScript copy of the UI that libraries use to calculate updates. The shadow DOM is a browser feature that gives a web component its own isolated tree of elements and styles.

Which frameworks use a virtual DOM?

React and Preact use a virtual DOM, and so does Vue by default. Frameworks such as Svelte and Solid avoid it by compiling components or tracking fine-grained changes, so they update exactly the DOM nodes that depend on changed data.

Often compared

DOM vs Virtual DOMThe DOM is the browser's live tree of page elements, while the virtual DOM is a light JavaScript copy that frameworks compare to decide what to change.