Fiber Architecture
Fiber is React's internal reconciliation engine introduced in React 16. Each component instance, DOM node, or fragment is represented as a fiber node — a JavaScript object that tracks the component's state, props, and position in the tree.
Fiber is an air traffic controller — it doesn't fly the planes (components), but it schedules their landing (rendering) order, can tell one to circle (pause), and prioritizes emergencies (user input) over routine flights.
The key innovation of Fiber is incremental rendering — the ability to split rendering work into chunks and spread it across multiple frames. Each fiber has a return (parent), child (first child), and sibling pointer, forming a linked list tree. React processes fibers using a work loop that can pause, resume, or abort work. This enables concurrent features like startTransition, Suspense, and prioritized updates. High-priority updates (user input) can interrupt low-priority ones (data fetching results).
React maintains two trees: the current tree (what's on screen) and the work-in-progress (WIP) tree being built. This double-buffering allows React to prepare the next frame without mutating the current UI. Each fiber stores an effect tag (Placement, Update, Deletion) that tells the commit phase what DOM operations to perform. The work loop uses a cooperative scheduling model via MessageChannel (not requestIdleCallback, which React considered but rejected for lack of control) to yield control back to the browser. React 18's concurrent mode uses lanes — a bitmask-based priority system replacing the older expiration time model — to classify updates by urgency.
Fiber is React's reconciliation engine that represents the component tree as a linked list of fiber nodes. Its key innovation is incremental rendering — splitting work into chunks so React can pause and resume, yielding to the browser for user input. It maintains two trees (current and work-in-progress) using double-buffering. React 18 uses a lanes priority system to schedule high-priority updates like user input ahead of lower-priority ones.
Thinking Fiber is the virtual DOM. Fiber is the reconciliation architecture that processes the virtual DOM. The virtual DOM is the element tree (React.createElement output); fibers are the internal work units that track component instances.