React Fiber is the core rendering engine introduced in React 16. It replaced the older “Stack Reconciler” to make rendering interruptible, incremental, and more responsive. So first we have to what is “Stack Reconciler”

What is the Stack Reconciler in React?

The Stack Reconciler was React’s original rendering engine, used in React 15 and earlier. Its job was to compare the old Virtual DOM with the new Virtual DOM (a process called reconciliation) and update the real DOM accordingly.

It was called the Stack Reconciler because it relied on the JavaScript call stack to recursively traverse the component tree.

How Stack Reconciler Works

When a component’s state or props changed:

setState() was called.
React created a new Virtual DOM tree.
It recursively compared the new tree with the previous one.
It calculated the differences (diffing).
It updated the real DOM.

The Main Limitation

The biggest drawback was that rendering could not be paused. If rendering took 500 ms, the browser had to wait the entire time.

During those 500 ms:

Typing became unresponsive.
Clicking buttons was delayed.
Scrolling could stutter.
Animations could freeze.

This is why older React apps sometimes felt sluggish during heavy rendering.

Why React Fiber was introduced

Before Fiber (React 15):

Rendering was synchronous.
Once rendering started, React could not pause.
Large component trees could freeze the UI.
No prioritization of updates.

What is Fiber?

A Fiber is a JavaScript object representing one React component.

Instead of processing the whole component tree at once, React breaks rendering into small units of work.

Each component gets its own Fiber node.

Fiber Node Structure

const fiber = {
    type: Component,
    stateNode: DOMNode,
    child: Fiber,
    sibling: Fiber,
    return: ParentFiber,

    pendingProps: {},
    memoizedProps: {},

    memoizedState: {},

    alternate: Fiber,

    flags: Placement | Update | Deletion,

    lanes: Priority
}

Field	Purpose
type	Component type
child	First child
sibling	Next sibling
return	Parent
alternate	Previous version
flags	What changed
lanes	Priority
stateNode	DOM element

Linked List instead of Recursive Tree

React does not traverse recursively anymore.

Instead it uses linked lists.

This allows React to:

Pause
Resume
Skip work
Continue later

Double Buffering

React maintains two Fiber trees.

Current Tree	Work In Progress Tree
App ├── Header └── List	App ├── Header └── Updated List

Advantages of React Fiber

Incremental rendering
Better responsiveness
Update prioritization
Interruptible rendering
Smooth animations
Concurrent rendering support
Better handling of large component trees
Foundation for features like Suspense, startTransition, and streaming server rendering

How does it improve rendering performance compared to the old reconciliation algorithm?

The old Stack Reconciler processed the entire component tree synchronously. Once rendering started, React had to finish all the work before the browser could respond to user interactions. In large applications, this could block the main thread, causing delayed clicks, typing, scrolling, and animations.

React Fiber improves this by breaking rendering into small units of work (Fiber nodes). This allows React to:

Pause and resume rendering instead of blocking the browser.
Prioritize urgent updates (like user input) over less important work (like rendering a large list).
Discard outdated work if newer updates arrive before rendering completes.
Keep the UI responsive by giving the browser opportunities to paint and handle user events between rendering tasks.

Does Fiber Make React Faster?

Not necessarily. If rendering a component tree requires 50 ms of CPU time, Fiber doesn’t magically reduce it to 20 ms. Instead, it spreads the work over time, prioritizes urgent updates, and keeps the browser responsive.

Why did Fiber replace the Stack Reconciler?

The Stack Reconciler performed rendering synchronously, which could block the UI during large updates. Fiber introduced interruptible rendering, scheduling, and prioritization, making React applications more responsive.

Why does React maintain two Fiber trees?

React keeps a Current Fiber Tree (the UI currently displayed) and a Work-in-Progress Fiber Tree (the new version being built). Once rendering is complete, React swaps the trees, ensuring smooth and consistent UI updates.

Why can’t the Commit Phase be interrupted?

The Commit Phase updates the real DOM. Interrupting it could leave the UI in an inconsistent or partially updated state, so React completes all DOM changes atomically.

What is Concurrent Rendering?

Concurrent Rendering allows React to pause, resume, or abandon rendering work to prioritize more important updates, keeping the UI responsive. It does not mean React uses multiple threads.

What are Lanes?

Lanes are React’s priority system. Each update is assigned to a lane (priority level), allowing urgent updates like user input to be processed before lower-priority background work.

What is the Scheduler?

The Scheduler decides when and which updates React should process based on their priority. It helps prevent the browser’s main thread from being blocked.

What is beginWork()?

beginWork() processes a Fiber node during the Render Phase. It compares new props with previous props, reconciles children, and determines whether the component needs to be updated.

What is completeWork()?

completeWork() runs after beginWork() finishes processing a Fiber node. It prepares the DOM updates and propagates completed work to the parent Fiber.

What is the Effect List?

The Effect List is a list of Fiber nodes that require DOM updates or lifecycle/effect execution. During the Commit Phase, React processes this list to apply all changes efficiently.

Why do Hooks depend on Fiber?

Hooks are stored as a linked list on each Fiber node. During rendering, React uses the current Fiber to retrieve hook state, which is why Hooks must always be called in the same order on every render.

React Fiber Architecture