Virtual DOM and Reconciliation

Analogy categoryAnalogies

Introduction

Directly manipulating the real DOM is relatively slow, especially when many elements change frequently. React solves this by using a Virtual DOM: a lightweight, in-memory representation of the actual DOM, expressed as plain JavaScript objects. Whenever a component's state or props change, React builds a new Virtual DOM tree and compares it to the previous one before touching the real DOM at all.

🏏

Cricket analogy: Repainting the entire physical stadium scoreboard for every single run is slow, so the broadcast team first drafts the new scoreline on a lightweight whiteboard (virtual DOM) and compares it to the previous draft before sending only the necessary changes to the giant stadium screen.

How It Works

The process of comparing the new Virtual DOM tree to the previous one and determining the minimal set of real DOM changes needed is called reconciliation. React's reconciliation algorithm (sometimes called 'the diffing algorithm') uses heuristics to keep this fast: it compares elements of the same type node by node, and it uses the 'key' prop to identify which items in a list have moved, been added, or been removed, rather than re-creating the whole list.

🏏

Cricket analogy: Comparing this over's lineup card to the last over's card to find exactly which fielder moved position is reconciliation; the analyst matches each fielder by their jersey number (the 'key'), so swapping two fielders is recognized as a move, not as two players being subbed out and new ones subbed in.

javascript

// Simplified idea of a Virtual DOM element
const virtualElement = {
  type: 'button',
  props: {
    className: 'btn',
    onClick: handleClick,
    children: 'Click me'
  }
};

Explanation

When state changes, React does not immediately mutate the real DOM. Instead, it re-runs the relevant component functions to produce a new tree of these lightweight virtual objects. React then 'diffs' the new tree against the previous tree: if an element's type stays the same, React updates only the changed attributes; if the type changes (for example, a div becomes a span), React tears down the old node and builds a new one. Once the diff is computed, React applies a single batch of real DOM operations, which is far more efficient than making many separate DOM updates directly.

🏏

Cricket analogy: When the score changes, the broadcast team doesn't touch the physical stadium screen immediately — they redraft the scoreline on paper first, and if the format of a segment stays the same (still a 'runs' number) they just update that digit, but if it changes type entirely (a 'target' box replacing a 'partnership' box) they tear out that section and rebuild it, then push one batch of screen updates.

Example

jsx

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Output

If a new todo is added to the middle of the todos array, React uses the key prop (todo.id) to recognize that the existing <li> elements represent the same items and simply inserts a new <li> in the correct position, instead of re-rendering every list item from scratch. Without stable keys, React may misidentify items during re-renders, causing unnecessary re-renders or subtle UI bugs like state being attached to the wrong item.

🏏

Cricket analogy: If a new batsman is inserted into the middle of the batting order, the scorer uses each player's unique cap number (the key) to recognize the existing entries are the same players and just inserts the new name in the right slot, instead of relabeling everyone below; using batting position instead of cap number as the key could misattribute a player's runs to the wrong name after a reorder.

Never use array indexes as keys for lists that can be reordered, filtered, or have items inserted/removed, since this can cause React to associate the wrong state with the wrong item.

Key Takeaways

The Virtual DOM is a lightweight, in-memory JavaScript representation of the real DOM.
Reconciliation is the process React uses to diff the new Virtual DOM tree against the previous one.
React batches the minimal set of real DOM updates for better performance.
Stable, unique 'key' props are essential for correct and efficient reconciliation of lists.