Learn the concept
React Internals
Reconciliation is React's diffing algorithm that compares the new virtual DOM tree with the previous one to determine minimal DOM updates. It uses heuristics: different element types trigger full subtree replacement, keys identify items in lists, and same-type elements update attributes.
What is Reconciliation:
Key Heuristics:
Different element types:
Same element type:
Keys for lists:
Fiber Architecture:
// BEFORE
<div>
<Counter />
</div>
// AFTER: Different root element type
<span>
<Counter />
</span>
// React will:
// 1. Unmount old <div> and <Counter>
// 2. Counter's componentWillUnmount / useEffect cleanup runs
// 3. Mount new <span> and fresh <Counter>
// 4. All Counter state is LOST!
// Same element type - just updates attributes
<div className="before" title="old" />
<div className="after" title="new" />
// React updates className and title on same DOM node
// Same component type - instance is kept
<Counter count={1} />
<Counter count={2} />
// Same Counter instance, state preserved, just re-rendersUnderstanding reconciliation to structure list keys and component hierarchies for minimal DOM mutations
Leveraging reconciliation knowledge to prevent layout thrashing during React-managed animations
Diagnosing unexpected re-mounts or state loss caused by reconciliation misunderstandings
Build a tool that shows the Fiber tree diff process when state changes, highlighting which nodes are created, updated, or deleted
Create a benchmark comparing reconciliation performance with different key strategies (index, UUID, stable ID)