React Virtual DOM and Reconciliation Explained

React uses a virtual DOM, a lightweight in-memory description of the interface, to compute what changed before it touches the real browser DOM. Instead of updating every element, React compares the old and new descriptions and applies only the differences.

The benefit is that you can describe the whole interface for a given state and let React figure out the smallest update. To understand how, start with the guide on what React is.

Here is a component whose text depends on a prop:

App.jsx

function Clock({ time }) {
  return (
    <div>
      <h1>{time}</h1>
      <input name="note" aria-label="Note" />
    </div>
  );
}

When the time prop changes every second, React updates only the text inside the heading. The input keeps whatever you typed because React leaves that DOM node alone. This selective updating is the point of the Virtual DOM.

The three steps of an update

React describes every screen update as three steps: trigger, render, and commit. The diagram below shows the flow.

The flow starts when state changes and ends when the browser repaints. Only the commit step touches the real DOM.

What the Virtual DOM is

The Virtual DOM is a plain JavaScript description of the interface. Each element is an object with a type and properties, not a real DOM node.

Real DOM nodes are expensive to create and update. The browser has to lay out the page and repaint after many changes. React works against the lightweight in-memory tree first, which is much cheaper to rebuild.

This is why a component returns JSX. JSX compiles into those plain objects that make up the in-memory tree.

How reconciliation works

When state changes, React renders your components again and gets a new tree. Reconciliation compares the new tree with the previous one and decides which real DOM nodes to update, create, or remove.

React compares elements by type and position:

• If the type is the same, React keeps the DOM node and updates only the changed props.
• If the type differs, React replaces the node.
• For lists, React uses keys to match items that moved or changed order.

Keys matter because position alone is not enough when a list changes. The guide on rendering lists with map shows stable keys in practice.

Why this matters to you

You almost never interact with the Virtual DOM directly. You write components that return JSX, and React handles the diffing.

The payoff is declarative code. Instead of finding an element and editing it, you describe the result for each state. React makes the page match that description with the fewest changes possible.

One rule follows from this model: rendering must be pure. A component should return the same JSX for the same props and state, without editing the DOM or other variables during render. That is what lets React safely call your component and compare results.

What to learn next

Now that you know updates flow through render and commit, see the difference it makes in practice by building your first React component and watching a state change trigger the flow.