What Is React Fiber Architecture?
Learn how React Fiber enables interruptible rendering, priority scheduling, and concurrent features like Suspense.
Expected Interview Answer
React Fiber is React’s internal reconciliation engine, introduced in React 16, that represents each component instance as a lightweight linked-list node so rendering work can be split into interruptible units instead of one uninterruptible recursive pass.
Before Fiber, reconciliation used the call stack recursively, meaning once React started rendering a large tree it could not pause, so a big update could block the main thread and freeze user input for the whole synchronous pass. Fiber restructures each element into a fiber node holding its type, props, and pointers to its child, sibling, and return (parent), turning the tree into a structure React can walk incrementally, unit by unit, yielding control back to the browser between chunks of work. This enables two-phase rendering: a render phase that builds the new fiber tree and can be paused, aborted, or prioritized, and a commit phase that synchronously applies the resulting changes to the real DOM in one uninterruptible pass so users never see a half-updated screen. Fiber is what makes concurrent features like time slicing, Suspense, and priority-based scheduling possible, since urgent updates like typing can interrupt a lower-priority render like a large list update.
- Allows rendering work to be paused, resumed, or abandoned instead of blocking the main thread
- Enables priority-based scheduling so urgent updates preempt less urgent ones
- Separates an interruptible render phase from an atomic, synchronous commit phase
- Forms the foundation for concurrent features like Suspense and transitions
AI Mentor Explanation
React Fiber is like switching from a single unbroken over that cannot be stopped once bowling starts, to a system where each delivery is a discrete unit the umpire can pause between if something urgent happens, like an injury. The old model committed the whole over before anything else could happen. With Fiber’s structure, the umpire can interrupt after any single ball, handle the urgent matter, then resume exactly where play left off. Only when the final scoring update is ready does it get posted to the board all at once, so spectators never see a half-updated score.
Step-by-Step Explanation
Step 1
Build the work-in-progress fiber tree
React walks the component tree, creating or reusing fiber nodes with child/sibling/return pointers.
Step 2
Render phase (interruptible)
React processes fiber units incrementally, yielding to the browser between chunks so urgent work can preempt it.
Step 3
Prioritize and reconcile
The scheduler assigns priority (e.g. user input vs background update) and can pause, resume, or discard in-progress work.
Step 4
Commit phase (synchronous)
Once the new fiber tree is complete, React applies all DOM mutations in one uninterruptible pass.
What Interviewer Expects
- Understanding that Fiber is a reconciliation data structure/algorithm, not a public API
- Ability to explain why the old stack-based reconciler could not be interrupted
- Clear separation of the interruptible render phase from the atomic commit phase
- Awareness that Fiber underpins concurrent features like Suspense and transitions
Common Mistakes
- Describing Fiber as just “a faster virtual DOM” without mentioning interruptibility
- Confusing the render phase with the commit phase and their different guarantees
- Claiming Fiber makes DOM updates themselves faster, rather than scheduling smarter
- Not connecting Fiber to concurrent features like startTransition or Suspense
Best Answer (HR Friendly)
“React Fiber is the engine under the hood that decides how and when React updates the screen. Before Fiber, once React started rendering something big, it could not stop until it was done, which could make the page feel frozen. Fiber breaks that work into small pieces so React can pause, handle something more urgent like a keystroke, and then pick back up, which makes apps feel more responsive.”
Code Example
// Simplified shape of a fiber node (not public API)
const fiberNode = {
type: 'div', // element type
key: null,
props: { className: 'card' },
child: null, // pointer to first child fiber
sibling: null, // pointer to next sibling fiber
return: null, // pointer to parent fiber
alternate: null, // pointer to the previous committed fiber
effectTag: 'UPDATE', // work to perform in the commit phase
}
// A transition tells React this update can be interrupted/deprioritized
startTransition(() => {
setSearchResults(computeExpensiveResults(query))
})Follow-up Questions
- How does the render phase differ from the commit phase in terms of guarantees?
- What role does startTransition play in Fiber-based scheduling?
- Why must the commit phase remain synchronous even though the render phase is interruptible?
- How does Fiber relate to Suspense and streaming server rendering?
MCQ Practice
1. What was the main limitation of the pre-Fiber stack reconciler?
The old recursive stack-based reconciler ran to completion once started, unable to yield to urgent work.
2. Which phase of Fiber-based rendering is interruptible?
The render phase builds the work-in-progress tree incrementally and can be paused; the commit phase is atomic.
3. What does the fiber node structure primarily enable?
Fiber nodes form a linked structure React can walk incrementally, unlike a plain recursive call stack.
Flash Cards
What is React Fiber? — React’s reconciliation engine that represents components as interruptible linked fiber nodes.
Render phase property? — Interruptible — can be paused, resumed, or discarded for higher-priority work.
Commit phase property? — Synchronous and atomic — applies all DOM mutations in one uninterruptible pass.
What does Fiber enable? — Priority scheduling and concurrent features like Suspense and startTransition.