Understanding React Fiber: Interrupt Mechanism, Scheduling and Performance Optimization

Since React 16, the library has adopted the Fiber mechanism to replace the previous synchronous VDOM rendering, aiming to boost page rendering performance and user experience.

Single‑task model – In early single‑task systems, a task monopolizes all CPU and memory resources; if it does not voluntarily release control, it blocks other tasks, similar to the UI thread in browsers where long‑running JavaScript causes UI jank.

Interrupt mechanism – Interrupts force the CPU to stop the current code and run a pre‑registered interrupt service routine (ISR). A common example is the timer interrupt, which periodically pre‑empts the running task, enabling time‑sliced multitasking.

while(true) {
...
};

Browsers run at about 60 Hz (≈16 ms per frame) and follow a pipeline of input handling, requestAnimationFrame , DOM rendering, and requestIdleCallback (RIC). RIC provides a way to execute low‑priority work in the remaining frame time, similar to an ISR.

function task() {
while(true){
...
};
}
requestIdleCallback(task);

Because user‑level code cannot be pre‑empted by the OS, RIC must voluntarily yield control. The deadline.timeRemaining() method tells the task when to pause and reschedule itself.

function task(deadline){
while(true){
...
if(!deadline.timeRemaining()){
requestIdleCallback(task);
// voluntarily exit loop
break;
}
}
}
requestIdleCallback(task);

Scheduling tasks – After an interrupt, the operating system saves the task’s context (e.g., registers) and later restores it when the task is rescheduled. React’s original synchronous rendering used deep recursion, which made context saving complex. Fiber breaks the work into small units (Fibers) linked in a linear list, so only the next Fiber’s metadata needs to be stored.

{
stateNode,
child,
return,
sibling,
expirationTime,
...
}

Example of rendering a component tree shows how React creates a chain of tasks; if time runs out after processing a node, the work loop can pause, record the next node, and resume later.

ReactDOM.render(
<div id="A">
A
<div id="B">
B<div id="C">C</div>
</div>
<div id="D">D</div>
</div>,
node
);

The core work loop checks whether the current task has exceeded its deadline and, if so, breaks to give control back to the browser.

function workLoop(hasTimeRemaining, initialTime) {
let currentTime = initialTime;
advanceTimers(currentTime);
currentTask = peek(taskQueue);
while (currentTask !== null && !(enableSchedulerDebugging && isSchedulerPaused)) {
if (currentTask.expirationTime > currentTime && (!hasTimeRemaining || shouldYieldToHost())) {
// time out – voluntarily yield
break;
}
...
}
...
}

In summary, the interrupt‑style scheduling and task‑splitting techniques used by React Fiber enable fine‑grained control over rendering work, improving responsiveness, priority handling, and the ability to pause and resume work without blocking the main thread.