Fiber Architecture
React Fiber is the complete rewrite of the core reconciliation engine, enabling incremental rendering and priority-based scheduling.
Mental Model
"The Smart Task Manager: Instead of blocking the whole computer until a 1-hour video finishes exporting, it processes frames in background chunks."
Interactive Engine Simulation
Executable Code Snippet
1// A Fiber is a "unit of work"
2const fiberNode = {
3 type: 'div',
4 child: FiberNode,
5 sibling: FiberNode,
6 return: FiberNode, // The parent
7 alternate: FiberNode // The WIP counterpart
8};- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. The To-Do List
Before Fiber, React used the **Call Stack** to render. Once it started, it couldn't stop until the whole tree was done, causing lag during large updates. Fiber is a rewrite of the core engine that turns the render process into a **To-Do List** of "Fibers" (units of work).
Concurrency Strategy
02. Virtual Call Stack
Fibers are a "virtual call stack." Because the work is broken into individual nodes with pointers to children, siblings, and parents, React can **pause rendering** to handle a user input or a high-priority animation, and then jump back right where it left off.
Architectural Advice
"You don't need to know the Fiber source code to use React, but understanding that render work can be **interrupted** is the key to mastering Concurrent Mode and Suspense."