Virtual DOM and Reconciliation

Difficulty: Advanced

The Virtual DOM is a lightweight JavaScript representation of the actual browser DOM. When you write JSX, React creates a tree of plain JavaScript objects (React elements) that describe what the UI should look like. This virtual tree is much cheaper to create and manipulate than actual DOM nodes, because the real DOM carries a massive amount of internal state (styles, event listeners, layout calculations).

When state changes, React creates a new virtual DOM tree and compares it with the previous one. This comparison process is called reconciliation, and the algorithm that performs it is called the diffing algorithm. React identifies the minimal set of changes needed and applies only those changes to the real DOM. This batched approach is far more efficient than directly manipulating the DOM for every state change.

React's diffing algorithm makes two key assumptions to achieve O(n) time complexity instead of the theoretical O(n^3) for generic tree diffing. First, elements of different types produce entirely different subtrees - if a <div> changes to a <span>, React tears down the entire old subtree and builds a new one instead of trying to morph it. Second, developers provide key props to hint which children remain stable across renders, allowing React to match and reuse existing elements.

The Fiber architecture (introduced in React 16) is the internal engine that performs reconciliation. Each component instance is represented as a Fiber node in a linked-list tree. Fiber enables incremental rendering - React can pause work on one part of the tree, handle a higher-priority update (like user input), and resume later. This is the foundation of concurrent features like Suspense, transitions, and automatic batching.

A common misconception is that the Virtual DOM is always faster than direct DOM manipulation. It is not. The Virtual DOM adds overhead (creating the virtual tree, diffing). Its advantage is that it provides a declarative programming model - you describe what the UI should look like, and React figures out the minimal DOM operations. The performance benefit comes from batching multiple updates into a single DOM write and from the developer not having to manually track what changed.

Code examples

JSX compiles to React.createElement (virtual DOM objects)

// This JSX:
<div className="card">
  <h1>Hello</h1>
  <p>World</p>
</div>

// Compiles to:
React.createElement('div', { className: 'card' },
  React.createElement('h1', null, 'Hello'),
  React.createElement('p', null, 'World')
);

// Which produces this virtual DOM object:
{
  type: 'div',
  props: {
    className: 'card',
    children: [
      { type: 'h1', props: { children: 'Hello' } },
      { type: 'p', props: { children: 'World' } }
    ]
  }
}

React elements are plain objects with type and props. This tree is the virtual DOM. React diffs this tree against the previous one to find changes.

Diffing algorithm in action

// Render 1: User is logged out
<div>
  <LoginButton />
  <p>Please log in</p>
</div>

// Render 2: User logs in
<div>
  <UserAvatar name="Alice" />
  <p>Welcome back!</p>
</div>

// Diffing result:
// 1. <div> same type -> keep DOM node, diff children
// 2. <LoginButton> vs <UserAvatar> -> different type!
//    -> Unmount LoginButton, mount UserAvatar (full replacement)
// 3. <p> same type -> keep DOM node
//    -> Text changed: 'Please log in' -> 'Welcome back!'
//    -> Update only the text content (minimal DOM operation)

React walks the tree top-down. Same type = update props. Different type = destroy and rebuild. Text nodes are updated in place. Only the actual changes hit the real DOM.

Why keys matter for list reconciliation

// Without keys - React matches by position
// Old:  [A, B, C]
// New:  [C, A, B]
// React thinks: position 0 changed A->C, position 1 changed B->A, position 2 changed C->B
// Result: 3 updates (inefficient!)

// With keys - React matches by identity
// Old:  [key:a A, key:b B, key:c C]
// New:  [key:c C, key:a A, key:b B]
// React knows: C moved to front, A and B shifted
// Result: move operations only, no content updates

// In code:
{items.map(item => (
  <ListItem key={item.id} data={item} />
  // key={item.id} tells React which element is which across renders
))}

Keys let React identify which items moved, were added, or were removed. Without keys, React falls back to index-based matching, which causes unnecessary unmounting and remounting when order changes.

Key points

• The Virtual DOM is not faster than manual DOM manipulation - it provides a declarative API that batches updates and minimises DOM writes automatically.
• React's diffing is O(n) because it compares elements level-by-level and assumes different types produce different trees.
• Fiber architecture enables concurrent rendering - React can pause, abort, and resume rendering work, which is the basis for Suspense and transitions.

Concepts covered

virtual DOM, reconciliation, diffing algorithm, fiber architecture, batching, React elements