How React Fiber Controls Updates: Inside the New Rendering Engine

Introduction

React 16 introduced the Fiber architecture, replacing the previous recursive VDOM traversal that relied on the native JavaScript call stack. Fiber enables finer‑grained scheduling, improves rendering performance, and makes the update process controllable.

What is Fiber?

Fiber is a cooperative execution model that breaks the work of rendering a component tree into small units (fibers). Each fiber represents a node in the virtual DOM and can be paused, resumed, or aborted based on time constraints and priority.

Key Concepts

Browser frame budget

Typical browsers run at 60 Hz, giving roughly 16 ms per frame. Within a frame the browser processes input, runs requestAnimationFrame, performs layout and paint, and may run requestIdleCallback (RIC) if time remains. Exceeding the 16 ms budget causes jank.

Accept input events

Execute event callbacks

Start a frame

Run requestAnimationFrame Layout and style calculation

Render

Run requestIdleCallback (optional)

JavaScript call stack vs. Fiber

Before Fiber, React traversed the VDOM recursively, pushing a new call frame for each component. Deep trees could block the main thread for longer than a single frame.

function A(){ B(); C(); }
function B(){}
function C(){}
A();

Time slicing

Fiber splits the reconciliation work into many small tasks that fit within a single frame. The scheduler yields control back to the browser when the remaining time falls below a threshold.

Linked‑list representation

Fiber stores the work tree as a set of linked lists rather than a recursive stack. Each fiber node points to its child, sibling, and parent, allowing O(1) insertion, deletion, and traversal.

<div id="id">
  A1
  <div id="B1">B1
    <div id="C1"></div>
  </div>
  <div id="B2">B2</div>
</div>

How Fiber Controls Updates

Fiber achieves controllable updates through three mechanisms: task splitting, suspension/resumption/termination, and priority scheduling.

Task splitting

During reconciliation each element and its text node become separate units of work. For example:

import React from "react";
import ReactDOM from "react-dom";

const jsx = (
  <div id="A1">
    A1
    <div id="B1">
      B1
      <div id="C1">C1</div>
      <div id="C2">C2</div>
    </div>
    <div id="B2">B2</div>
  </div>
);

ReactDOM.render(jsx, document.getElementById("root"));

The scheduler creates a new task only after the previous one finishes, allowing the browser to interleave other work.

Suspension, resumption, and termination

Two trees are maintained: the workInProgress tree (currently being built) and the current tree (last committed). The scheduler can pause work when the frame’s time runs out, resume later, or abort if a higher‑priority update arrives.

let nextUnitWork = null;

function scheduler(task) {
  nextUnitWork = task;
}

function workLoop(deadline) {
  let shouldYield = false;
  while (nextUnitWork && !shouldYield) {
    nextUnitWork = performUnitWork(nextUnitWork);
    shouldYield = deadline.timeRemaining() < 1;
  }
  if (!nextUnitWork) {
    console.log("All tasks completed");
    // commitRoot(); // commit updates
  }
  requestIdleCallback(workLoop, { timeout: 5000 });
}

function performUnitWork(currentFiber) {
  // process currentFiber and return next fiber
  return FiberNode;
}

When a task finishes, the scheduler returns the next child, sibling, or parent fiber, continuing until the tree is fully built.

Task priority

Each fiber carries an expirationTime that encodes its priority. If a fiber’s expiration time has passed, it must be processed immediately, even if the current frame is idle.

Fiber Node Structure

class FiberNode {
  constructor(tag, pendingProps, key, mode) {
    this.tag = tag;                     // component type
    this.key = key;                     // element key
    this.elementType = null;            // type from createElement
    this.type = null;                   // resolved type
    this.stateNode = null;              // instance (DOM node or class component)
    this.return = null;                 // parent fiber
    this.child = null;                  // first child fiber
    this.sibling = null;                // next sibling fiber
    this.index = 0;                     // index among siblings
    this.ref = null;                    // ref attribute
    this.pendingProps = pendingProps;    // new props
    this.memoizedProps = null;          // old props
    this.updateQueue = null;            // pending state updates (linked list)
    this.memoizedState = null;          // previous state
    this.mode = mode;                  // rendering mode flags
    this.effectTag = NoEffect;          // side‑effect type
    this.nextEffect = null;             // next fiber with side effect
    this.firstEffect = null;            // first child with side effect
    this.lastEffect = null;             // last child with side effect
    this.expirationTime = NoWork;       // when this task should finish
    this.childExpirationTime = NoWork;  // earliest child expiration
    this.alternate = null;              // link to current fiber
  }
}

Comparison with Other Frameworks

Vue uses a watcher‑based dependency collection rather than a Fiber‑style linked list. While both aim to minimize unnecessary work, Vue’s design does not require the same task‑splitting and priority mechanisms.

Conclusion

React Fiber transforms the update process into a series of small, prioritized units stored in linked lists. This enables the browser to interleave rendering with other work, reduces jank, and provides a flexible foundation for future architectural patterns.