The React reconciler is the engine that drives the library’s ability to sync declarative UI descriptions with the imperative DOM. Prior to the introduction of Fiber, React used a stack-based reconciler. While efficient for simple trees, the stack-based approach was inherently synchronous and recursive; once it started reconciling a component tree, it could not be interrupted until the entire process reached the DOM.

The Fiber [architecture](/blog/architecture-decision-records-capturing-engineering-decisions-that-outlast-the-team) fundamentally changed this by treating the reconciliation process as a unit of work that can be paused, resumed, or discarded. By decoupling the reconciliation (the ‘diffing’ phase) from the commit phase, React gained the ability to prioritize updates based on urgency, forming the bedrock of Concurrent Mode.

The Fiber Data Structure

At its core, a Fiber is a JavaScript object that represents a unit of work. Unlike the traditional Virtual DOM node, which is often a static representation of a component, a Fiber node maintains the state, the effect list, and the topological information of the component tree. Each Fiber acts as a node in a linked list rather than a rigid tree, allowing for a more flexible traversal mechanism.

function FiberNode(tag, pendingProps, key, mode) {
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.stateNode = null;

  // Fiber structure
  this.return = null; // Parent
  this.child = null;  // First child
  this.sibling = null; // Next sibling

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.memoizedState = null;
  this.effectTag = 0;
  this.alternate = null; // Pointer to the corresponding fiber in the other tree
}

The Two-Phase Reconciliation Process

React maintains two trees during the update process: the ‘current’ tree and the ‘work-in-progress’ (WIP) tree. When an update is triggered, React clones the current tree into the WIP tree using the alternate pointer. This ensures that the UI remains consistent even if the reconciliation process is interrupted.

The Render Phase

The Render phase is asynchronous and interruptible. React traverses the WIP tree, executing component functions and computing the differences between the new and old props. During this phase, React identifies side effects—DOM mutations, lifecycle calls, or hook executions—and tags them on the Fiber node.

The Commit Phase

Once the Render phase completes, React enters the Commit phase. This phase is synchronous. React traverses the effect list built during the Render phase and applies all changes to the DOM in a single burst. This separation is critical: because the Render phase is non-blocking, the browser remains responsive to user input even during heavy computational tasks.

How Concurrent Mode Works

Concurrent Mode leverages the interruptible nature of the Fiber reconciler. React uses the browser’s requestIdleCallback or a polyfill via MessageChannel to schedule work in small chunks. By yielding control back to the main thread periodically, React allows the browser to process high-priority events like clicks or text input before continuing with the reconciliation.

The fundamental shift in Concurrent Mode is the transition from a ‘push’ model of rendering to a ‘pull’ model, where React constantly checks the main thread’s availability before proceeding with the next unit of work.

Trade-offs and Limitations

• Memory overhead: Maintaining multiple trees and Fiber objects increases the memory footprint compared to a stack-based approach.
• Complexity: The asynchronous nature of the Render phase requires developers to write pure components, as rendering logic may execute multiple times.
• Debugging: Tracing state updates becomes more difficult when reconciliation can be paused or deferred.

Conclusion

The Fiber architecture represents a significant departure from standard tree-traversal algorithms. By transforming the reconciliation tree into a linked list of work units, React provides a robust framework for managing complex UI updates without sacrificing user experience. While the complexity of this architecture is high, it provides the necessary infrastructure for modern, highly dynamic web applications to remain performant under load.