React Reconciliation & Fiber Architecture: How React Renders Efficiently

A deep dive into React’s reconciliation process, why the old approach had limitations, and how Fiber Architecture changed the way React schedules rendering work.

Before diving into Reconciliation and Fiber architecture, I want to briefly walk through React’s underlying behavior and philosophy when it comes to handling state changes.

Whenever the state changes, React compares the Virtual DOM it has created with the previous version (diffing), rather than the actual DOM, and applies only the parts that have actually changed to the real DOM. Throughout this process, React essentially asks itself the following question: “How can I update the user interface correctly and efficiently when the state changes?”

What Is Reconciliation ?

The process of comparing the old React Tree with the new React Tree to determine which changes need to be applied is called Reconciliation.

React represents the UI as a tree of elements in memory. When state or props change, React creates a new tree and compares it with the previous one to determine what needs to change.

Why Does React Do This?

Performing all of these updates directly on the real DOM would be slow and expensive, as it can trigger browser operations such as re-rendering and layout calculations.

Instead, React compares changes through the Virtual DOM and applies only the necessary updates to the real DOM. This approach is significantly more efficient.

However, the traditional reconciliation process was recursive and synchronous. As applications grew and component trees became larger and more complex, the reconciliation process could take a significant amount of time.

This limitation is exactly what led to the introduction of React Fiber Architecture.

What Is Fiber Architecture and What Is Its Core Idea?

Due to the problem described above, React’s reconciliation algorithm was redesigned around the Fiber Architecture.

The Core Idea: Break the rendering work into small, manageable units and allow React to pause, prioritize, and resume that work when necessary.

Fiber is not just the name of an algorithm. It is also a JavaScript object used to represent a unit of work in React’s component tree.

Fiber = {
 type: any,
 tag: WorkTag,
 key: ReactKey,
 elementType: any,
 stateNode: any,
 sibling: Fiber | null,
 child: Fiber | null,
 return: Fiber | null,
 index: number,
 pendingProps: any, 
 memoizedProps: any,
 flags: Flags,
 subtreeFlags: Flags,
 deletions: Array | null,
 ...
};

Reconciliation: What Changed?

Reconciliation determines what has changed in the component tree and what needs to be updated.

Fiber: How Can I Organize and Execute This Work?

Fiber provides the underlying data structure and architecture that allows React to organize, prioritize, pause, and resume rendering work efficiently.

React Reconciliation & Fiber Architecture: How React Renders Efficiently was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.