How does React's reconciliation algorithm work, and why can't you use index as a key in lists?

React's Reconciliation Algorithm

React uses a Virtual DOM diffing algorithm to minimize real DOM operations. When state/props change:

1. Creates new Virtual DOM tree
2. Compares (diffs) with previous tree
3. Computes minimum DOM operations needed
4. Applies changes to real DOM

The Key Prop's Role

key tells React which items changed, were added, or removed. It's the identity of each element.

Why Index as Key Breaks

Initial state:  [Todo A, Todo B, Todo C]
                 key: 0    key: 1   key: 2

After removing A:  [Todo B, Todo C]
                    key: 0    key: 1

React sees:

key=0: Was "Todo A", now "Todo B" → Update text (wrong! should remove A)

key=1: Was "Todo B", now "Todo C" → Update text (wrong! should shift up)

key=2: Gone → Remove (wrong! C still exists)

Result: Input values (uncontrolled) stay with their DOM nodes but get mismatched with items.

The Fix

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <input defaultValue={item.text} />
          <button onClick={() => removeItem(item.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

Now React correctly:

Removes the DOM node for deleted item's key

Keeps existing DOM nodes for unchanged items

Input values stay correctly associated

When Index is OK

Static lists that never change order

Lists with no uncontrolled inputs

Lists that are never filtered/sorted

ScenarioIndex KeyStable ID Key

Static list✅ Works✅ Works
Reordering❌ Bugs✅ Correct
Deleting items❌ Bugs✅ Correct
Uncontrolled inputs❌ Data mixup✅ Correct
PerformanceO(n) worst caseO(n) optimal

Under the Hood

React's diffing uses these rules:
1. Different types → teardown old, build new (e.g., div → span)
2. Same type, different keys → teardown old, build new
3. Same type, same key → update props only