Reconciliation Algorithm
Slap yourself if
You think reconciliation is just 'diffing the Virtual DOM' or that React compares trees node-by-node exhaustively.
Why this exists
The reconciliation algorithm exists to efficiently determine what changed between renders and update the UI with minimal work, without doing an expensive full tree diff that would be too slow for real-time interactions.
Mental model
Reconciliation is a heuristic-driven comparison between the previous UI tree and the new one. React makes assumptions—like stable element order and keys—to decide which parts can be reused, updated, or thrown away, trading perfect minimality for predictable performance.
- A state or prop change triggers a render.
- React creates a new description of the UI (elements).
- React compares the new elements with the previous Fiber tree using heuristics.
- Based on type, key, and position, React decides to reuse, update, move, or delete nodes.
- Only the differences that survive reconciliation are committed to the DOM.
- Using array indices as keys and causing unintended remounts or state loss.
- Assuming React performs a deep, optimal diff of entire subtrees.
- Mutating data in place and breaking referential equality assumptions.
- Accidentally forcing full subtree re-renders by changing component identity.
Reconciliation is React’s process of comparing the previous and next UI trees using heuristics—like element type and keys—to decide what can be reused or needs to change, avoiding an expensive full diff while keeping updates predictable.
- React does a full tree diff every render.
- Keys are only for performance.
- If props change, the component always remounts.
Deep dive
Premium deep dives include more internals, more scars.
How reconciliation actually matches elements to Fibers
- Element type comparison
- Key-based identity
- Position-based matching
How small key mistakes cause large bugs
A wrong key rarely causes a small bug — it usually corrupts state.
Heuristics vs optimal diffing
Reconciliation prioritizes predictable performance over perfect minimal updates.
Reconciliation cost and rendering performance
Reconciliation cost grows with tree size and identity instability.
Debugging reconciliation problems
- Look for unexpected remounts
- Audit keys and component identity
Related terms
Fiber Architecture
You think Fiber is just a rewrite of the Virtual DOM or that it exists only to make React faster.
Virtual DOM Diffing Complexity
You think React performs an optimal O(n log n) or O(n) diff of two arbitrary UI trees every render.
Referential Equality
You think two objects with the same values are equal in JavaScript or that referential equality is an implementation detail you can ignore.
Memoization Pitfalls
You think memoization automatically makes code faster or that using useMemo/useCallback is always a performance win.
Concurrent Rendering
You think concurrent rendering means React renders in parallel threads or it always makes apps faster.
Time Slicing
You think time slicing is just 'splitting work' or the same thing as code splitting.