Engrain by ByteRush

RCT.02.02 Senior· 12 minCore — asked often

Fiber architecture: how React splits rendering into small units of work

A fiber is a unit of work in a linked tree (child, sibling, return). Learn the work-in-progress tree and double buffering, why the render phase can be interrupted, lanes for priorities, and how the scheduler yields to the browser.

Comes up in: React, Frontend system design

Learn#

Before React 16, rendering a large tree was one long recursive call. Typing in a search box above a 5,000-row table froze for 300 ms, because React could not stop halfway.

Fiber rebuilt React’s core around a fiber: one object per component, holding its type, props, state and hooks, plus three pointers: child, sibling and return (parent). With these pointers, React walks the tree in a loop, one fiber at a time, instead of with recursion. A loop can stop after any fiber and continue later.

React keeps two trees: current, what is on screen, and the work-in-progress tree being built. Each fiber points to its twin through alternate. When the new tree is complete, React commits it and swaps the trees, like double buffering in graphics.

The work loop walks fibers and can pauseStep 1 of 4

Call stack

  • workLoop

State

  • next = App → child Header

React starts at the root fiber App: beginWork(App) calls App and creates fibers for its children.

Read the steps as text
  1. React starts at the root fiber App: beginWork(App) calls App and creates fibers for its children.
  2. It follows child pointers down: beginWork(Header), then beginWork(Logo). Logo has no child, so completeWork(Logo).
  3. Logo has no sibling, so it returns to Header: completeWork(Header). Header's sibling List is next: beginWork(List).
  4. Between units, React checks shouldYield(). After about 5 ms it pauses, lets the browser handle input and paint, then resumes from the saved pointer.

Predict#

Predict first

React is halfway through a low-priority render when the user types. What happens to the half-built work-in-progress tree?

Interview angle#

Say it like this — about 30 seconds

“Fiber is React’s reconciler since version 16. Each component instance is a fiber, a unit of work linked by child, sibling and return pointers, so React can walk the tree with a loop rather than recursion, and stop between units. It builds a work-in-progress tree alongside the current one and swaps them on commit. Updates get priorities called lanes, and the scheduler yields to the browser every few milliseconds. This makes concurrent features such as transitions and Suspense possible.”

Stays on your device. Nothing is uploaded.
Follow-up What is React Fiber, and what problem did it solve?
A rewrite of React’s reconciler into small units of work, so rendering can be paused, prioritized and resumed instead of blocking the main thread.
Follow-up What are lanes?
Bit flags that mark an update’s priority, such as sync, input or transition, so React can batch and process urgent work first.
Follow-up Is the commit phase interruptible?
No. The commit runs synchronously so the DOM is never left half-updated.

Practice#

On your own

Link a tree into fibers and walk it the way React’s work loop does: no recursion, just pointers.

Done when

  • toFiber sets child, sibling and return correctly.
  • walk produces begin and complete steps in React’s order, with no recursion.
  • A 10,000-deep chain does not overflow the stack.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

What three pointers does a fiber have to walk the tree?

child, sibling and return (parent).

What is the work-in-progress tree?

The new fiber tree being built during render, swapped in at commit.

What are lanes?

Priority flags on updates.

Which phase can React interrupt?

The render phase, not the commit phase.

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round

beginWork calls the component and reconciles its children; completeWork runs when a fiber and all its children are done, preparing DOM nodes and collecting effects to commit.

Check yourself: Which function runs when React enters a fiber, and which when it leaves?

beginWork on entry, completeWork on exit.

How it works underneathSenior rounds

Fibers are reused between renders through alternate, so React does not allocate a whole new tree each time. Unchanged subtrees are cloned or skipped (“bailout”) .

Check yourself: What does alternate point to?

The same fiber's twin in the other tree (current or work-in-progress).

Edge cases and trapsWhere people slip
Interruption only happens for concurrent renders, such as transitions; urgent updates render synchronously.
The scheduler works in slices of about 5 ms, then yields with a macrotask (MessageChannel) so the browser can respond (JS.01.07).
Check yourself: How often does React's scheduler yield by default?

About every 5 ms of work.

In productionStaff-level answers

Lanes let React render urgent updates first and finish transitions later. A component can render without its result being committed, which is why render must be pure (RCT.01.03).
Read the source in react-reconciler for depth .

Check yourself: Why might a component render but never commit?

Its render was interrupted and thrown away by a higher-priority update.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

Interview questions this answers

  • What is React Fiber and what problem did it solve?