What is the "diffing algorithm"?

ReactJunior~3 min read

The diffing algorithm is the heart of React's reconciliation mechanism. It determines exactly which parts of the virtual tree (Virtual DOM) changed between the previous and the new interface state, so it can update the real DOM minimally.

In simpler terms

When a React component re-renders:

React creates a new virtual tree (Virtual DOM).
Compares it with the previous virtual tree.
Finds the differences (diff) between them.
Applies only the changed parts to the real DOM.

The algorithm that performs this "smart" comparison step is called the diffing algorithm.

Why it is needed

Working with the DOM is an expensive operation. If React simply recreated the entire tree on every change, the interface would "lag" even for the smallest changes.

The diffing algorithm lets React:

understand exactly what changed;
update only the changed spot;
do it as fast and efficiently as possible.

How diffing works in React (the main rules)

React uses a simplified and optimized diffing algorithm based on two key assumptions:

1. Elements of different types → treated as completely different

If an element's type changed (<div> → <span> or ComponentA → ComponentB), React removes the old node and creates a new one from scratch.

javascript

// Before
<div>Hello</div>

// After
<span>Hello</span>

React completely removes the <div> and creates a new <span>.

2. Elements of the same type → React compares their attributes (props)

React checks which props changed and updates only those, precisely.

javascript

<button disabled={false}>Button</button>
// →
<button disabled={true}>Button</button>

React changes only the disabled attribute.

3. Lists of elements are compared by their keys (`key`)

This is the most important rule for lists (.map()).

React compares list elements by their keys to understand which ones stayed, were removed, or were added.

javascript

{items.map(item => <li key={item.id}>{item.text}</li>)}

If the keys:

are the same - React keeps the element (only updates its content);
differ - React removes the old element and creates a new one.

Without keys:

React thinks the elements just "shifted" and repaints the whole list.

With keys:

React "understands" that only one element changed and updates only that one.

Example of how the diffing algorithm works

Before:

javascript

<ul>
  <li key="a">A</li>
  <li key="b">B</li>
</ul>

After:

javascript

<ul>
  <li key="b">B</li>
  <li key="a">A</li>
</ul>

If there are no keys, React decides that both elements changed and recreates both <li>s.

If there are keys, React understands the elements just swapped places and reorders them without recreating them.

The algorithm's running time

A naive comparison of two trees node by node is O(n³) (very slow). React optimized this down to O(n) thanks to keys and simplified rules:

it does not compare different types;
it only compares sibling nodes;
it uses keys to track moves.

Diffing within the Fiber Architecture

Since React 16+, diffing has become incremental and prioritized:

diffing can be paused for less important components;
it can be resumed later (Concurrent Rendering);
priorities can be assigned to updates (for example, text input > animations).

Summary

What the diffing algorithm does	Why it's needed
Compares the old and new virtual tree	To determine where the interface changed
Determines the minimal differences (diff)	To update the DOM as little as possible
Uses comparison rules by type and keys	To be as fast as possible
Runs in O(n), not O(n³)	To scale even on large trees
Is part of reconciliation	It's part of the process of "reconciling" changes

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.