React: What’s reconciliation?

In a nutshell

Keeping in mind that React’s job is to make the host instance tree match your React element tree, reconciliation is the process of figuring out what to do to the host instance tree in response to new information (e.g., new props or state).

// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// Can reuse host instance? Yes! (button → button)
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

// Can reuse host instance? No! (button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('container')
);

// Can reuse host instance? Yes! (p → p)
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  <p>Goodbye</p>,
  document.getElementById('container')
);

This same process is used for nested trees. React will start at the element at top of the tree and recursively walk through any child trees to make the necessary modifications.

Sources

• Reconciliation – React docs
• Reconciliation – React as a UI Runtime