What is React reconciliation and how does it work?

HighIntermediateReact

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

Reconciliation is React’s identity model for deciding whether a subtree keeps state or remounts. The high-value interview explanation is about preserve-vs-replace behavior when element types or keys change.

Answer

Overview

Reconciliation is React’s decision process for component identity: should this subtree be preserved, updated in place, or remounted? That distinction matters in interview and production bugs because changing an element type or unstable key can reset local state even when the UI looks almost the same. Diffing is one implementation detail inside that bigger preserve-vs-replace decision.

Step	Description
Render Phase	React creates a new Virtual DOM representation of the UI based on the latest component state and props.
Diffing Phase	React compares the new Virtual DOM with the old one to detect what has changed.
Commit Phase	React updates only the changed elements in the real DOM, leaving the rest untouched.

Main phases of React’s reconciliation process

JSX

// Example: Reconciliation in action
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Only <h2> changes when count updates; React reuses <div> and <button>.

Why It Matters
Direct manipulation of the DOM is expensive. React’s reconciliation process ensures that only necessary updates happen, minimizing reflows and improving performance. This approach makes React declarative — you describe the UI, and React efficiently figures out how to update it.

Rules of Reconciliation

<li>

If an element type changes (e.g., <div> → <span>), React destroys and rebuilds that node.
Keys help React identify elements across renders, especially in lists, ensuring stable updates instead of re-creating entire subtrees.

Reconciliation and Keys

Keys allow React to match old and new elements efficiently.
When keys are missing or inconsistent, React may re-render entire lists instead of updating only changed items.
Stable, unique keys (like IDs) help React maintain state between renders.

Example
If you render a list and change one item’s position, React uses the key attribute to identify which element moved instead of destroying and re-creating all items.

JSX

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

Reconciliation is React’s secret engine — it ensures your UI stays fast by updating only what’s necessary, not everything that changed.

Summary

Reconciliation is React’s process for updating the DOM efficiently.
It compares old and new Virtual DOM trees using the diffing algorithm.
Only changed parts of the real DOM are updated, ensuring optimal performance.