Chapter 11: React Architecture & The Fiber Engine
Step behind the curtains of React's internal engineering. Learn how the React Fiber engine reimplemented the JavaScript execution stack, how time-slicing keeps user interfaces responsive at 60 frames per second, and how to structure enterprise systems using proven design patterns.
1. From Stack Reconciler to React Fiber
In React 15 and earlier, React utilized the Stack Reconciler. When state updated, React recursively walked down the component tree using the native JavaScript call stack. The critical flaw in this approach was that JavaScript execution in the browser is single-threaded:
If an update took 100 milliseconds to traverse a large component tree, the browser main thread was completely locked. User mouse clicks, key presses, and CSS animations were blocked, dropping the frame rate below the target 60 FPS (16.6ms per frame) and creating noticeable UI jank.
In React 16, Meta unveiled React Fiber. Fiber completely reinvented reconciliation by turning the native recursive call stack into a custom, in-memory linked-list data structure that React can pause, resume, prioritize, or abandon at will!
2. Anatomical Breakdown of a Fiber Node
A Fiber is a JavaScript object that represents a unit of work. Every React element on the page maps to a Fiber node. Fiber nodes are chained together using three pointers:
// Simplified anatomical shape of a Fiber Node:
{
type: 'button', // Component function, class, or HTML tag
key: null, // Unique identifier for list diffing
stateNode: HTMLButtonElement, // Reference to physical browser DOM node
// Pointers forming the linked-list work tree:
child: FiberNode | null, // First child
sibling: FiberNode | null, // Next sibling
return: FiberNode | null, // Parent fiber
// Work and State Tracking:
memoizedProps: { ... }, // Props used to render the previous output
pendingProps: { ... }, // Newly incoming props
memoizedState: { ... }, // Hook linked list (useState, useEffect)
lanes: 0b0001, // Bitmask representing update priority level
alternate: FiberNode, // Pointer to the double-buffered counterpart node
}Just like modern video game graphics engines use double buffering to prevent screen tearing, React maintains two Fiber trees in memory: the Current Tree (representing what is currently mounted on screen) and the Work-in-Progress (WIP) Tree (where new calculations and diffs are computed off-screen). During the commit phase, React simply switches a single pointer (workInProgress.alternate), swapping the trees instantly!
3. The Two Phases of the Fiber Work Loop
Every React render cycle is divided into two distinct phases:
1. The Render Phase (Reconciliation)
- Asynchronous & Interruptible: React processes fiber nodes one by one in small time slices.
- Yields to Browser: If a user clicks a button or an animation is due, React pauses its work and yields control back to the browser.
- Zero DOM Mutation: Components are called, hooks execute, and differences are recorded, but no physical browser DOM nodes are touched.
2. The Commit Phase (Mounting)
- Synchronous & Uninterrupted: Must complete all at once to prevent inconsistent visual glitches.
- Physical DOM Writes: React applies the calculated mutations to the actual browser DOM.
- Side Effect Execution: Layout effects (
useLayoutEffect) run synchronously, followed by passive effects (useEffect).
4. Architectural Design Patterns for Enterprise React
Scaling a React codebase to hundreds of developers requires robust design patterns:
Container / Presentational
Container: Manages API fetching, subscriptions, and state hooks.
Presentational: Pure UI component receiving data solely through props with zero business logic.
Compound Components
Components that work together cohesively (e.g., <Accordion> and <AccordionItem>) communicating through an implicit internal Context, offering expressive JSX without prop passing.
Custom Hook Abstraction
Extract stateful mechanics (like pagination, debouncing, or WebSocket streams) into testable custom hooks, keeping UI components concise and focused.
Frequently Asked Questions (FAQ)
What is the React Fiber architecture and why was it introduced?
React Fiber is a complete rewrite of React's core reconciliation engine introduced in React 16. The legacy 'Stack Reconciler' processed the component tree synchronously and recursively, meaning a heavy render could block the browser main thread and freeze user interactions. Fiber reimplemented the call stack as an in-memory linked list of fiber nodes, enabling incremental, interruptible rendering, priority-based scheduling, and concurrency.
What are the two phases of Fiber rendering in React?
The two phases are: 1) The Render Phase (reconciliation), which is asynchronous and interruptible. In this phase, React diffs fiber nodes, calls component functions, and calculates side-effects without touching the real DOM. 2) The Commit Phase, which is synchronous and cannot be interrupted. Here, React writes the calculated DOM updates to the physical screen and executes layout effects.
What are the three pointers that connect Fiber nodes together?
Every Fiber node in memory is connected as a singly-linked list using three pointers: 'child' (points to its first direct child), 'sibling' (points to its next sibling), and 'return' (points back to its parent container). This structure allows React to traverse, pause, and resume rendering anywhere in the tree without a native recursive call stack.
What is the Compound Components pattern in React?
The Compound Components pattern allows a parent component and several child sub-components to work together harmoniously while sharing implicit state via React Context (e.g., <Tabs><TabList><Tab /></TabList><TabPanels><TabPanel /></TabPanels></Tabs>). This creates clean, declarative APIs without rigid prop-drilling.
Explore Related Tools
Hand-picked utilities and calculators related to this tool.
