37) Reconciliation Algorithm

The Reconciliation Algorithm in React is the process React uses to efficiently update the DOM when your state or props change.
Instead of re-rendering everything from scratch, React figures out, “What actually changed?” → and updates only those parts.
The Core Idea is When state/props change:
React creates a new Virtual DOM tree
Compares it with the previous Virtual DOM
Calculates the minimum number of changes
Updates the real DOM efficiently
This comparison process is called Reconciliation (Diffing Algorithm)
Why It Matters
Direct DOM updates are expensive.
Reconciliation makes React: Fast, Efficient and Scalable for large UIs

How Diffing Works (Simplified)
Step 1: Compare root elements
Different → replace whole subtree
Same → continue deeper
Step 2: Compare attributes
Update only changed props
Step 3: Compare children
Match using keys
Add/remove/reorder as needed

React Fiber
React Fiber is the internal reconciliation engine that breaks rendering into small units of work, allowing React to pause, prioritize, and schedule updates efficiently, enabling features like concurrent rendering and better UI responsiveness.
Fiber is a data structure + algorithm used by React to break rendering work into small units and schedule them intelligently
Before Fiber (old “stack reconciler”):
Rendering was synchronous
Once started → could not pause
Large updates → UI freezes / jank
Problem: Poor user experience for complex apps
Fiber solves this by enabling:
Interruptible rendering
Priority-based updates
Better scheduling
Concurrent features (like transitions, Suspense)

Two Phases of Fiber
Render Phase (Reconciliation)
i) Build new Fiber tree
ii) Can be paused, stopped, restarted
iii) Pure computation (no DOM changes)
Commit Phase
Apply changes to real DOM
Synchronous (cannot be interrupted)
Fast (already computed work)