Technologist & Entrepreneur | Innovator in FinTech, AI, Blockchain, Quantum Computing & Emerging Technologies

Breaking Down React's Virtual DOM: How Rendering Works

Understanding React's Virtual DOM (VDOM) is key to mastering how React efficiently updates the UI. This guide walks through the VDOM lifecycle—from triggering a render to updating the real DOM—using a step-by-step breakdown and a visual chart.

Visualizing the VDOM Process

graph TD A[Trigger Render] --> B[Render Component Tree] B --> C[Create New VDOM Tree] C --> D[Reconciliation Phase] D --> E[Traverse Nodes] E --> F[Compare Node Types and Keys] F --> G{Types Match} G -->|Yes| H[Compare Props and State] H --> I{Props/State Differ} I -->|Yes| J[Mark Node for Update] I -->|No| K[Recurse on Children] G -->|No| L[Mark for Replacement] F --> M[Handle Additions/Removals] J --> N[Compute DOM Mutations] K --> N L --> N M --> N N --> O[Commit Phase] O --> P[UI Updated] style A fill:#f9f,stroke:#333 style P fill:#f9f,stroke:#333 style D fill:#bbf,stroke:#333 style O fill:#bbf,stroke:#333

The React VDOM Lifecycle

React's rendering process is designed for speed and minimal DOM manipulation. Here's how it works:

1. Trigger Render (State/Props Change)

Any change in component state or props triggers React's render process.

2. Render Component Tree

React re-renders the affected component and its children, building a new tree of React elements.

3. Create New VDOM Tree

React creates a new Virtual DOM tree—a lightweight JS object representing the UI structure.

4. Reconciliation Phase

React compares the new VDOM tree to the previous one. This diffing process is called reconciliation.

5. Traverse Nodes & Compare

React traverses both trees, comparing node types and keys to identify changes.

If types and keys match, React checks if props or state differ.
If they differ, the node is marked for update.
If not, React recurses on children.
If types/keys don't match, the node is marked for replacement.
New or missing nodes are handled as additions/removals.

6. Compute Minimal DOM Mutations

React batches all necessary changes—additions, removals, updates, moves—into a minimal set of DOM mutations.

7. Commit Phase

React applies these mutations to the real DOM in one efficient batch.

8. UI Updated

The user interface reflects the latest state and props.

Why the VDOM Matters

React's VDOM and reconciliation process allow for fast, predictable UI updates. By minimizing direct DOM changes, React keeps apps responsive—even as complexity grows.

Originally posted on November 02, 2024. This explainer is based on modern React internals and rendering strategies.