What is the Virtual DOM in React, and how does the Reconciliation (Diffing) algorithm work?

Short answer

The Virtual DOM is a lightweight in-memory representation of the real DOM tree; Reconciliation calculates differences precisely and makes as few direct browser DOM changes as possible.

Explanation

When a component's State changes, React creates a new Virtual DOM tree. The Diffing algorithm compares it with the previous tree based on two assumptions: elements of different types produce different trees, and Keys track stable items across renders. After calculating the Diffs, React applies them together to the Real DOM in the Commit phase.

Code example

// Illustrative example of default item behavior
function Welcome({ name }: { name: string }) {
  // Compiles JSX to React.createElement("h1", null, `Hello ${name}`)
  return <h1 className="greeting">Hello {name}</h1>;
}

Common mistakes

• Believing the Virtual DOM is always faster than direct manipulation of the raw DOM, without considering the cost of comparing trees in memory.

Follow-up questions

• Why are Keys important when rendering lists, and what are the risks of using the array index as a Key?
• What is the role of React Fiber, and how do Render Phase and Commit Phase differ?

Sources

• React docs — Preserving and Resetting State
• React docs — Render and Commit