React Deep Dive: Reconciliation & Fiber
React's popularity isn't just about syntax; it's about the sophisticated "diffing" and "rendering" engine under the hood.
The Virtual DOM and Reconciliation
When state changes, React creates a new Virtual DOM tree. It then compares (diffs) this new tree with the old one to find the minimum set of changes required to update the "Real" DOM. This process is called Reconciliation.
The Diffing Algorithm Rules:
- Elements of different types: React destroys the old tree and builds a new one from scratch.
- Keys: React uses keys to match children in the original tree with children in the subsequent tree, making list updates efficient.
React Fiber: The Reconciliation Engine
Fiber is the reimplementation of React's core algorithm (v16+). Its main goal is to enable Concurrent Rendering.
- Incremental Rendering: The ability to split rendering work into chunks and spread it out over multiple frames.
- Priority: It can pause low-priority work (like rendering a list) to handle high-priority work (like user input/typing).
The Render vs Commit Phase
- Render Phase: React calculates what needs to change (Pure, no side effects, can be paused/restarted).
- Commit Phase: React applies the changes to the DOM (Synchronous, can't be interrupted).
Why this matters?
Understanding Fiber helps you understand why some updates are delayed and how useTransition and useDeferredValue work to keep your UI responsive during heavy updates.