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

Scenario	Index Key	Stable ID Key
Static list	✅ Works	✅ Works
Reordering	❌ Bugs	✅ Correct
Deleting items	❌ Bugs	✅ Correct
Uncontrolled inputs	❌ Data mixup	✅ Correct
Performance	O(n) worst case	O(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