Skip to main content

What does Virtual DOM do?

ReactJunior~3 min read
Suggest an edit

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>; }
  1. 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.
  1. 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

AdvantageDescription
Faster than working directly with the DOMUpdates happen in memory, not the browser
Convenience of declarative codeThe developer just "describes" what they want to see
Easy UI updatesReact itself figures out what and where needs to change
Fewer bugsLess 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.

Short Answer

Interview ready
Premium

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

Suggest an edit