Submit a Question
Programming

What is the virtual DOM in React?

Short answer

The virtual DOM is a lightweight, in-memory copy of the real DOM that React updates first, then compares against the previous version to figure out the minimal set of real changes needed.

Directly updating the browser's real DOM is relatively slow, especially for frequent or complex UI updates. React sidesteps this by keeping a virtual representation of the UI in memory as plain JavaScript objects.

How it works

  1. When state changes, React builds a new virtual DOM tree reflecting the updated UI
  2. React compares ("diffs") this new tree against the previous virtual DOM tree
  3. React calculates the minimal set of actual changes needed, and applies only those to the real DOM — this step is often called "reconciliation"

Why this matters

Batching and minimizing real DOM updates this way is significantly faster than naively re-rendering the whole page on every change, especially as an application's UI grows more complex. It's also what allows React developers to write code that simply describes "what the UI should look like for this state," rather than manually writing step-by-step DOM manipulation instructions.

Last reviewed: September 2026

Related questions