Reconciliation & Fiber Engine:
- Virtual DOM: A lightweight in-memory JavaScript representation of the actual browser DOM elements.
1. Diffing Algorithm Heuristics (O(N) Complexity):
- React applies two heuristics to avoid expensive O(N^3) tree comparisons:
- Different Element Types: Two elements of different types produce entirely different trees; the old component unmounts completely.
- Key Attribute: Unique, stable keys allow React to identify which items in a list were moved, added, or removed, preserving component state.
2. The Fiber Architecture:
- Purpose: Solves the blocking problem of React's older Stack Reconciler, which could not be interrupted once rendering started, causing dropped animation frames.
- Fiber Nodes: A fiber is a unit of work representing a component instance with a pointer to its child, sibling, and parent.
- Two-Phase Processing:
- Render Phase: Asynchronous and interruptible. React reconciles fibers, assigns priority (via concurrent features), and calculates the effect list. Can be paused or abandoned if higher-priority input arrives.
- Commit Phase: Synchronous. React applies all mutations to the actual browser DOM in one atomic pass.