What is the virtual DOM and how does React use it

· Category: React

Short answer

The virtual DOM is a lightweight JavaScript representation of the real DOM. React compares the current virtual DOM with a new version (diffing), calculates the minimum set of changes, and applies only those to the real DOM (reconciliation). For performance optimization, see how to optimize React renders.

How it works

  1. When state changes, React creates a new virtual DOM tree
  2. It compares the new tree with the previous one (diffing algorithm)
  3. It computes the minimal set of real DOM mutations needed
  4. It applies those changes in a single batch (reconciliation)

Fiber architecture

React 16+ uses Fiber, a reimplementation of the reconciler that supports incremental rendering, priority-based updates, and concurrent features like Suspense.

Tips