Virtual DOM & Reconciliation

How React updates the screen blazingly fast without redrawing everything.

React3 min readConcept 4 of 46

What it is

The **Virtual DOM** is a lightweight JavaScript copy of the actual DOM. When you update state in React, it doesn't immediately touch the real browser DOM.

Instead, React creates a new Virtual DOM tree. **Reconciliation** is the diffing algorithm React uses to compare the *new* Virtual DOM against the *old* Virtual DOM. It calculates the exact, minimal set of changes needed and patches only those specific nodes in the real DOM.

Why it matters

Updating the real DOM is computationally expensive and slow because the browser has to recalculate layouts and repaint the screen. Modifying a plain JavaScript object (the Virtual DOM) is nearly instantaneous.

By batching changes and applying only what differs, React guarantees high performance while still letting you program as if the entire screen is re-rendered on every state change.

How React tracks state

React relies on the Virtual DOM to know where state belongs. State is tied to a component's **position** in the UI tree, not to the component code itself.

If a component stays at the exact same position in the Virtual DOM tree between renders, React preserves its state. If the component's position changes, or if you replace it with a different component type, React destroys the old component (and its state) and mounts a new one.

The Diffing Engine

Watch React compare the old tree to the new tree. Instead of redrawing the entire screen, it surgically updates only the node that changed.

function Profile() {
const [name, setName] = useState("Guest");
 
return (
<div className="profile">
<Header />
<p>{name}</p>
<Footer />
</div>
);
}
 
// State changes from 'Guest' to 'Alice'
// setName('Alice');

Old Virtual DOM

<div>Header"Guest"Footer

New Virtual DOM

<div>Header"Alice"Footer

Real DOM Patch

<Header /> is untouched.
<Footer /> is untouched.
Surgically swap text node: Guest → Alice

React generates a new Virtual DOM, diffs it against the old one, and patches only the exact text node that changed in the real DOM.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the primary purpose of the Virtual DOM?
  2. 2How does React know whether to preserve a component's state between renders?
  3. 3Why should you never define a component inside another component?

Remember this

  • Reconciliation is the process of diffing the Virtual DOM to update the real DOM efficiently.
  • Component state is tied to its position in the tree, not its data.
  • Never define a component inside another component.

Done with this concept?

Mark it complete to track your progress. No login needed.