Reconciliation

Reconciliation is the process by which React updates the DOM whenever the state changes. React doesn't re-render everything from scratch when the state changes; instead, it first finds whether a mutation is required by comparing the new virtual DOM with the old one, and if there is a difference, it compares the new virtual DOM with the real DOM and makes the necessary mutations.

Note

Note that reconciliation doesn't happen only when you change the component state; it also happens when you call ReactDOM.render on the same container element again.

Let's see how exactly reconciliation happens by looking at an example. Suppose this is the initial render:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

If we remove Item 1 from the state, then the render will change to this:

<ul>
  <li>Item 2</li>
</ul>

React algorithms compare DOM items one by one, and whenever they find a difference between two nodes, they make mutations. So...