How React reconciliation works under the hood

· Category: React

Short answer

Reconciliation is React's algorithm for comparing a new virtual DOM tree with the previous one and computing the minimal set of changes needed to update the real DOM.

How it works

React assumes that elements of different types produce different trees. It compares child lists by key, reusing existing DOM nodes when possible. When a component's props or state change, React re-renders it and recursively reconciles its children.

Example

// Old tree
<ul>
  <li key="a">Apple</li>
  <li key="b">Banana</li>
</ul>

// New tree
<ul>
  <li key="b">Banana</li>
  <li key="a">Apple</li>
</ul>

React swaps the DOM nodes to match the new order, preserving state because keys are stable.

Tips

  • Always supply stable, unique keys in lists.
  • Avoid array indices as keys when item order can change.
  • Re-render does not always mean DOM update; React batches and deduplicates changes.