How React's Virtual DOM Works Under the Hood

How React's Virtual DOM Works Under the Hood

Every time you update state in React, something intelligent happens behind the scenes. React doesn't rush to update the browser immediately. It takes a calculated approach that keeps your application fast even as it grows in complexity.

The Problem With Direct DOM Manipulation

The browser's DOM is a tree of objects representing everything visible on screen. Whenever something changes, the browser recalculates layouts, recomputes styles, and repaints portions of the screen. This process is expensive.

Modern web applications update constantly search inputs, filters, notifications, dashboards. If every change meant rebuilding large chunks of the real DOM, applications would feel sluggish. This is the core problem React was built to solve.

What the Virtual DOM Actually Is

The Virtual DOM is simply a JavaScript object that describes what the UI should look like. It mirrors the structure of the real DOM but exists entirely in memory. Because it is just a JavaScript object, creating and manipulating it is extremely fast no browser layout engine, no style recalculation, no painting.

React uses this as a scratchpad. Instead of touching the browser DOM directly on every change, React first works out what the new UI should look like in memory, then figures out the minimum real DOM changes needed to match that description.

Initial Render

When your app first loads, React calls your component functions, collects their output, and assembles one complete Virtual DOM tree. It then walks this tree and creates actual browser DOM nodes for every element. This initial construction is the only time React builds the full DOM from scratch. After this, React keeps the Virtual DOM snapshot in memory as a reference for what the current UI looks like.

State Change Triggers a Re-render

When state changes, React does not immediately update the DOM. It schedules a re-render, which allows it to batch multiple updates together and process them as a group. When the re-render runs, React calls your component again with the new state, producing a fresh Virtual DOM tree. Now React has two trees the old snapshot and the new one.

Diffing and Reconciliation

React compares the old and new Virtual DOM trees node by node. This is called reconciliation or diffing. If two nodes at the same position have the same type, React reuses the DOM node and only checks what attributes changed. If the type changed entirely, React discards the old subtree and builds fresh. For lists, React uses the key prop to accurately track which items were added, removed, or reordered which is why keys are meaningful instructions to the algorithm, not just warnings to suppress.

The result of diffing is a minimal description of exactly what needs to change.

Minimal DOM Updates

React then commits only those changes to the browser DOM. If one text node changed, React updates that one node. If a class name was added, React updates that one attribute. Everything else is left completely untouched. The browser never recalculates or repaints parts of the page that didn't change.

Why This Is Fast

The performance gain comes from the difference in cost between two operations. Working with JavaScript objects in memory is cheap. Touching the browser DOM is expensive. React shifts as much work as possible into the cheap category virtual tree creation, comparison, change calculation all in memory. Only the final, minimal set of DOM mutations goes to the browser.

Batching amplifies this further. Multiple state changes from a single user event get processed together in one render cycle one diff, one set of DOM updates instead of triggering separate browser repaints.

The Full Flow

State changes
→ Component re-runs
→ New Virtual DOM created
→ Old vs New diffing (reconciliation)
→ Minimal patch calculated
→ Real DOM updated
→ Effects run

This cycle repeats every time your application updates. It is predictable, efficient, and fully managed by React.

The Mental Model That Matters

The Virtual DOM enables a particular way of thinking about UI. Instead of writing code that describes how to transition between states, you write code that describes what the UI should look like for a given state. React handles the how. You think declaratively, React handles the DOM imperatively underneath. The Virtual DOM is the mechanism that makes this possible without sacrificing performance.