React.js Reconciliation

Reconciliation is the process React uses to update the UI efficiently when data changes.

When the state or props change:

React creates a new Virtual DOM
Compares it with the previous Virtual DOM
Finds the differences (Diffing Algorithm)
Updates only the changed parts in the real DOM

This process is called Reconciliation.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

What happens when button clicked?

count changes
React creates new Virtual DOM
React compares old and new Virtual DOM
Only <h1> value updates
Entire page does NOT reload

FAQs