React: How does Reconciliation work?

Reconciliation is the process of comparing old and new Virtual DOM and applying minimal changes to the real DOM.

Simple analogy: Imagine you have a shopping list on the fridge (old Virtual DOM). You decided to update the list (new Virtual DOM). Instead of throwing away the entire list and writing a new one, you:

1. Compare — which items remained, which were added, which were removed.
2. Fix — erase only what changed.
3. Leave — what did not change, leave as is.

How React compares:

1. Comparison by element type:

   • If type changed: <div> → <span> → React removes old element and creates new one (with all children).
   • If type is the same: <div> → <div> → React updates props and recursively compares children.

2. Comparison by keys:

   • For lists (map) React uses key to understand which element is which.
   • Bad: key={index} — if the list is re-sorted, React redraws everything.
   • Good: key={item.id} — React knows exactly which element moved where.

3. Optimization:

   • React.memo — skip comparison if props did not change.
   • useMemo/useCallback — stable references to objects/functions.

Important: Reconciliation is the reason why you need to specify key for lists and not change element type without necessity.