React Curriculum

Fiber Node Architecture & Work Loop

Hard100% Free~30 mins#react#fiber#work-loop#reconciler#concurrent-rendering#double-buffering

Interview Answer (30-Second Summary)

React Fiber is an internal reconciler data structure that replaces the recursive call stack with a singly linked list (child, sibling, return). This enables cooperative multitasking: React can pause rendering work, yield to the browser main thread, prioritize urgent updates, and resume without losing progress.

Key Learning Objectives

✓

Contrast the legacy Stack Reconciler (uninterruptible recursion) with Fiber (linked-list work loop).

✓

Explain the anatomy of a Fiber node: child, sibling, return, stateNode, and memoizedState.

✓

Understand the double-buffering technique: current Fiber tree vs workInProgress Fiber tree.

✓

Explain how the workLoopConcurrent pauses work using time slicing.

The Interview Problem & Context

Why did React replace the Stack Reconciler with the Fiber architecture? Explain the Fiber node pointers (child, sibling, return) and how double-buffering prevents incomplete UI renders.

1// Conceptual representation of a Fiber node
2interface FiberNode {
3  tag: number;            // FunctionComponent, HostComponent, etc.
4  type: any;               // 'div', MyComponent
5  stateNode: any;          // Reference to DOM node or class instance
6
7  // Singly Linked List Tree Pointers:
8  child: FiberNode | null;   // First child
9  sibling: FiberNode | null; // Next sibling
10  return: FiberNode | null;  // Parent (return) Fiber
11
12  // State & Effects:
13  memoizedState: any;      // Linked list of hooks!
14  flags: number;           // Placement, Update, Deletion flags
15
16  // Double Buffering:
17  alternate: FiberNode | null; // Pointer to corresponding Fiber in other tree
18}
19
20// The Concurrent Work Loop
21function workLoopConcurrent() {
22  // Perform work on units of work while there is remaining time in the browser frame!
23  while (workInProgress !== null && !shouldYieldToHost()) {
24    performUnitOfWork(workInProgress);
25  }
26}

Deep Architectural Explanation

The Stack Reconciler vs Fiber Architecture

Why the Legacy Stack Reconciler Failed

Prior to React 16, React used the Stack Reconciler:

It traversed the component tree using ordinary JavaScript recursion.
Once a render started, it could not be interrupted until the entire tree was evaluated.
If rendering a large tree took 100ms, the browser main thread was completely blocked, dropping frames and freezing user typing or animations!

The Fiber Solution: A Virtual Call Stack

Fiber re-architected the tree as a singly linked list:

child: Points to the component's first child.
sibling: Points to the component's next sibling.
return: Points to the parent Fiber (the caller to return to when work is complete).

Because Fiber nodes are plain JavaScript objects on the heap rather than stack frames on the call stack, React can:

Stop working at any node.
Save workInProgress = currentNode.
Yield execution back to the browser to handle a user click.
Resume work later from the exact same node!

Double-Buffering

React maintains two Fiber trees at any given time:

current tree: Represents the nodes currently visible on the screen.
workInProgress tree: The draft tree React is building in the background.
When the background render finishes, React swaps a single top-level pointer (root.current = workInProgress) in the Commit phase! The user never sees a partially rendered UI.

Common Interview Traps & Pitfalls

Confusing Virtual DOM (the declarative element trees) with Fiber (the internal reconciler data structure).

Thinking Fiber is a public API that application developers import and call directly.

Assuming Fiber performs DOM mutations during the interruptible work loop (mutations only occur in the synchronous commit phase).

Senior Interviewer Follow-Up Probes

How does React prioritize different units of work using Priority Lanes (SyncLane, TransitionLane)?

Why does React use MessageChannel instead of requestIdleCallback for scheduling work?

What happens to a workInProgress Fiber tree if an urgent state update cancels it?

Frequently Asked Interview Questions

What is a React Fiber?

A Fiber is an internal JavaScript object representing a unit of work and a node in the component tree, holding pointers to child, sibling, and parent Fibers alongside hook states.

Why did React adopt a linked-list structure instead of recursion?

Linked lists can be paused, saved in memory, and resumed at any point, whereas native JavaScript recursion cannot be interrupted without losing the call stack.

What is double-buffering in React Fiber?

React builds a draft "workInProgress" tree in memory while the user sees the "current" tree. When the draft is ready, React swaps pointers instantaneously, preventing partial UI updates.

What does performUnitOfWork do?

It executes beginWork on a Fiber (running component functions, diffing children), returns the child Fiber if one exists, or completes the unit of work and moves to the sibling or parent.

Does Fiber execute DOM mutations during time slicing?

No. All DOM mutations are deferred to the synchronous Commit Phase so the user never sees an inconsistent or partially updated DOM.

Previous: The Reconciliation Diffing Algorithm Next: Render Phase vs Commit Phase Mechanics