Why React Rewrote Its Architecture: Inside Fiber and Concurrent Mode

1. Introduction

When using

React

, many developers encounter update jank, as shown by a flame graph where JavaScript execution takes 287 ms before rendering starts (25.4 ms).

Browsers refresh at 60 Hz (every 16.6 ms), so JavaScript and GUI threads share the same frame. If JavaScript runs too long, the UI drops frames.

To reduce JavaScript execution time, React rewrote its architecture.

2. React Architecture Rewrite

2.1 Architecture before React 16

Reconciler : synchronizes the virtual DOM with the real DOM; in React 15 it is called the stack reconciler.

Renderer : renders the VDOM changes to the page when components update.

2.2 React 16 (Fiber) Architecture

React 16 introduces a new architecture to solve jank. The old recursive update of React 15 caused severe lag when the VDOM depth was large.

The core idea is to reserve a few milliseconds (default 5 ms) in each frame for the JavaScript thread, similar to HTTP/2’s binary framing that avoids head‑of‑line blocking.

<code>let yieldInterval = 5;</code>

If the reserved time runs out, the JavaScript thread is paused and the GUI thread takes over; React continues later via its own Scheduler polyfill.

Scheduler : schedules work during idle time.

Reconciler : now a Fiber reconciler.

Renderer : unchanged.

React 16 splits updates into a coordinating phase (interruptible) and a commit phase (non‑interruptible).

3. Concurrent Mode

3.1 What is Concurrent Mode?

Concurrent Mode is a set of new React features that keep applications responsive by adjusting work based on device performance and network speed.

3.2 Demo

Demo comparisons show synchronous updates cause noticeable input lag, while asynchronous updates provide smoother responsiveness.

4. How Concurrent Mode Works

4.1 Scheduler

React uses

requestIdleCallback

(or a polyfill based on

MessageChannel

and

setTimeout

) to schedule work when the browser is idle.

<code>function task(deadline) {
  while (true) {
    if (!deadline.timeRemaining) {
      requestIdleCallback(task);
      // exit loop, give control back to browser
      break;
    }
  }
}
requestIdleCallback(task);
</code>

4.2 Time Slicing

The default slice is 5 ms, adjusted according to the current frame rate.

<code>const forceFrameRate = fps => {
  if (fps < 0 || fps > 125) return;
  if (fps > 0) {
    yieldInterval = Math.floor(1000 / fps);
  } else {
    yieldInterval = 5;
  }
};
</code>

4.3 Reconciler Changes

Fiber introduces a new data structure that builds a Fiber tree during diff, allowing interruption and resumption.

4.3.1 Lifecycle Split

The coordinating phase (diff) can be interrupted; the commit phase (render, lifecycle methods) cannot.

<code>static getDerivedStateFromProps()
shouldComponentUpdate()
Render()
</code>

<code>getSnapshotBeforeUpdate()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
</code>

4.4 Priority Model

React assigns each update a priority using either an expiration‑time model or the newer Lane model, allowing higher‑priority tasks (e.g., user input) to pre‑empt lower‑priority work.

Lane bits represent priority buckets;

InputDiscreteLanePriority

handles user interactions, while

DefaultLanePriority

handles async requests.

5. Future of Concurrent Mode

Beyond performance, Concurrent Mode provides APIs that may shape future React development patterns.

6. Looking Ahead to React 18

React 17 is considered a stepping stone that introduced Concurrent Mode; React 18 will roll out these features gradually rather than an all‑or‑nothing switch.