Virtual DOM: What It Is and How It Works

Virtual Document Object Model

The Virtual DOM is an in-memory representation of the real DOM that JavaScript frameworks like React use to calculate the minimum set of changes needed before updating what the user sees on screen. Instead of manipulating the browser's DOM directly on every state change, the framework updates the Virtual DOM first, compares it to the previous version, and applies only the differences to the real DOM.

What Is the Virtual DOM

The real DOM is a live tree of objects that the browser maintains to represent the current state of a web page. Every time JavaScript modifies it, the browser must recalculate styles, recompute layout, and repaint affected areas of the screen. These operations are not free. For simple changes they are fast enough to be imperceptible, but for applications with complex interfaces that update frequently, directly manipulating the real DOM on every state change becomes a significant performance bottleneck.

The Virtual DOM is a lightweight JavaScript object tree that mirrors the structure of the real DOM but exists entirely in memory. It has no connection to the browser's rendering engine and carries no layout or paint overhead. When a component's state changes, the framework re-renders that component into the Virtual DOM, producing a new in-memory tree. It then compares this new tree against the previous snapshot through a process called diffing, identifies exactly which nodes have changed, and applies only those targeted changes to the real DOM in a single batched operation.

The result is that the browser performs the minimum possible work to reflect a state change on screen. The developer writes code as if the entire UI is re-rendered from scratch on every update, which is simple and predictable, while the framework silently handles the optimisation of translating that into efficient DOM operations.

Real DOM vs Virtual DOM

How the Virtual DOM Works: The Reconciliation Process

The Virtual DOM works through a three-phase cycle that runs every time state or props change in a component. This cycle is called reconciliation and it is the heart of how frameworks like React translate declarative component code into efficient real DOM updates.

1. A user interaction, a network response, or a timer fires and causes a component's state or props to change
2. The framework calls the component's render function, which returns a new Virtual DOM tree describing what the UI should look like given the new state
3. The framework compares the new Virtual DOM tree against the previous snapshot of the Virtual DOM through the diffing algorithm
4. The diffing algorithm traverses both trees simultaneously, identifying nodes that have been added, removed, or changed. It produces a minimal list of mutations needed to transform the old tree into the new one.
5. The framework batches all identified mutations into a single set of real DOM operations and applies them in one pass
6. The browser processes only the changed DOM nodes, performing layout and paint for the affected areas rather than the entire page
7. The framework saves the new Virtual DOM tree as the current snapshot for the next reconciliation cycle

// What the Virtual DOM looks like internally
// (React calls these objects "React elements")

// Before state change:
const oldVDOM = {
  type: 'div',
  props: { className: 'user-card' },
  children: [
    { type: 'h2', props: {}, children: ['Alice'] },
    { type: 'p',  props: {}, children: ['Online'] }
  ]
};

// After state change (user goes offline):
const newVDOM = {
  type: 'div',
  props: { className: 'user-card' },
  children: [
    { type: 'h2', props: {}, children: ['Alice'] },
    { type: 'p',  props: {}, children: ['Offline'] } // only this changed
  ]
};

// Diffing result: only the text content of the 
 element changed
// Real DOM operation: update textContent of one 
 node only

The Diffing Algorithm

Comparing two tree structures completely is a computationally expensive operation. The theoretical complexity of comparing two arbitrary trees is O(n³), meaning a tree with 1000 nodes would require a billion comparisons. This would make Virtual DOM diffing far too slow to be useful in practice.

React and similar frameworks use a heuristic diffing algorithm that reduces this to O(n) by making two assumptions that hold true for the vast majority of real-world UI updates.

• Different element types produce different trees: If a node changes from a <div> to a <span>, the framework destroys the entire old subtree and builds a new one from scratch rather than trying to reconcile the children. This avoids deep comparisons when the structure has fundamentally changed.
• Keys identify stable elements in lists: When rendering a list of elements, the developer provides a unique key prop for each item. The diffing algorithm uses these keys to match elements across renders, correctly identifying which items were added, removed, or reordered without comparing every element against every other element.

// Without keys: React cannot tell which items changed
// and may re-render the entire list
const badList = items.map(item =>
  <li>{item.name}</li>
);

// With keys: React efficiently identifies added, removed,
// and reordered items
const goodList = items.map(item =>
  <li key={item.id}>{item.name}</li>
);

// Using array index as key is also problematic
// because indexes change when items are reordered
const poorList = items.map((item, index) =>
  <li key={index}>{item.name}</li> // avoid this pattern
);

Virtual DOM in React

React was the framework that popularised the Virtual DOM pattern and its implementation remains the most widely referenced. In React, the Virtual DOM is represented as a tree of plain JavaScript objects called React elements. When you write JSX, the Babel compiler transforms it into calls to React.createElement(), each of which returns one of these lightweight objects.

// JSX syntax (what you write)
function UserCard({ name, status }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>{status}</p>
    </div>
  );
}

// What Babel compiles it to (what the browser runs)
function UserCard({ name, status }) {
  return React.createElement(
    'div',
    { className: 'user-card' },
    React.createElement('h2', null, name),
    React.createElement('p',  null, status)
  );
}

// Each React.createElement call returns a plain object like:
// { type: 'div', props: { className: 'user-card' }, children: [...] }

React's reconciler, called Fiber since React 16, manages the process of comparing Virtual DOM trees and scheduling DOM updates. Fiber introduced the ability to pause, abort, and resume reconciliation work, allowing React to prioritise urgent updates such as user input over lower-priority updates such as data fetching results, keeping the interface responsive even during heavy rendering work.

Virtual DOM vs Direct DOM Manipulation

The Virtual DOM is not always faster than direct DOM manipulation. For very simple updates, directly targeting a specific DOM node with element.textContent = newValue is faster than the full Virtual DOM cycle of re-rendering a component, diffing, and patching. The advantage of the Virtual DOM emerges in complex applications where many parts of the interface can change simultaneously and the developer does not want to manually track which specific DOM nodes need updating.

Frameworks That Use the Virtual DOM

• React: The framework that popularised the Virtual DOM. Uses a reconciler called Fiber that supports concurrent rendering, allowing urgent updates to interrupt lower-priority work. React Native extends the same Virtual DOM model to native mobile interfaces by targeting native UI components instead of browser DOM nodes.
• Preact: A 3KB alternative to React that implements the same Virtual DOM API and component model with a much smaller footprint. Used in performance-critical applications where bundle size is a constraint.
• Vue: Uses a Virtual DOM for its rendering layer but pairs it with a reactive data system that tracks exactly which components depend on which data. This means Vue can often skip entire subtrees during diffing because it knows precisely which components are affected by a given state change.
• Inferno: A high-performance Virtual DOM framework designed for speed-sensitive use cases. Uses compile-time hints called shape flags to make diffing faster by telling the runtime ahead of time what kinds of changes are possible for a given element.

Frequently Asked Questions

1. Is the Virtual DOM always faster than the real DOM?
   Not always. The Virtual DOM adds overhead: creating the in-memory object tree, running the diffing algorithm, and then applying the changes to the real DOM. For a simple targeted update like changing a single text value, directly manipulating the real DOM with element.textContent is faster because it skips all of that overhead. The Virtual DOM becomes advantageous in complex applications with many components where state changes affect an unpredictable subset of the interface. The developer trades raw update speed for simplicity and predictability, letting the framework determine the optimal set of DOM operations.
2. What is reconciliation?
   Reconciliation is the process by which a framework compares the new Virtual DOM tree produced after a state change with the previous snapshot and determines the minimum set of real DOM operations needed to bring the browser's DOM in sync with the new desired state. It encompasses the diffing algorithm that identifies differences between the old and new trees, the decision logic for how to handle different types of changes, and the batching and application of the resulting DOM mutations. In React, the reconciler is a distinct subsystem called Fiber that manages scheduling and prioritisation of this work.
3. Why should I use a key prop in lists?
   The key prop gives the diffing algorithm a stable identity to associate with each element in a list across renders. Without keys, the algorithm compares elements by position: the first element in the new list is compared to the first element in the old list, and so on. If items are reordered, added, or removed, positional comparison produces incorrect results and forces unnecessary re-renders or DOM mutations. With keys, the algorithm can correctly match each element to its previous version regardless of its position, resulting in accurate and efficient updates. Keys must be stable and unique among siblings. Using array indexes as keys is unreliable when the list can be reordered.
4. How is React's Virtual DOM different from Vue's?
   Both React and Vue use a Virtual DOM for rendering, but they differ in how they track what needs to update. React uses a unidirectional data flow model where a state change re-renders the component that owns the state and all its descendants, relying on the diffing algorithm to avoid unnecessary real DOM changes. Vue pairs its Virtual DOM with a fine-grained reactivity system that tracks which components read which pieces of state. When state changes, Vue knows exactly which components are affected and can skip diffing for the rest of the tree. This makes Vue's updates more targeted in some scenarios, while React's approach is simpler to reason about for complex data flows.
5. What is the difference between the Virtual DOM and the Shadow DOM?
   Despite similar names, the Virtual DOM and the Shadow DOM are completely different concepts that solve different problems. The Virtual DOM is a performance optimisation pattern used by JavaScript frameworks to minimise real DOM operations. It is an implementation detail of the framework and is invisible to the browser. The Shadow DOM is a native browser feature that provides encapsulation for web components, allowing an element to have its own private DOM tree that is isolated from the main document's CSS and JavaScript. You can inspect Shadow DOM trees in browser developer tools. The two are independent and can be used together: a framework using a Virtual DOM can also render web components that use the Shadow DOM.

Conclusion

The Virtual DOM is a foundational concept in modern frontend development that allows frameworks to provide a simple, declarative programming model without sacrificing rendering performance. By maintaining an in-memory representation of the UI and using diffing algorithms to compute minimal real DOM updates, frameworks like React and Vue allow developers to write code that describes what the interface should look like rather than how to manipulate it step by step. Understanding the Virtual DOM, how reconciliation works, why keys matter in lists, and where the abstraction adds overhead rather than removing it gives you the insight to write faster React and Vue components and make better architectural decisions in complex frontend applications. Continue with the DOM, browser rendering, and the critical rendering path to build a complete picture of how browsers turn code into pixels.