What is React Fiber and How It Helps You Build a High-Performing React Applications

In React, a reconciler is an algorithm that helps it compare two DOM trees and get the difference between the two. This helps React determine what it needs to change on the screen.

Introduced in React 16, Fiber is a new reconciler algorithm that the React team has culminated over two years of research. It aims to solve many of the problems that came with the original algorithm. So ultimately, React Fiber can be seen as a re-implementation of one of React’s core algorithms.

With such a fundamental change, there are rippling changes to how React works under the hood and what that means for you as the developer.

The term “fiber” relates to React’s tree data structure and how it represents a node of the DOM tree.

What Problem Does Fiber Solve?

Rendering the page, responding to user actions, running Javascript and much more are all handled by the browser’s main thread. If at any time our main thread gets blocked, the user’s experience can become laggy and slow.

We can safely move some of these things to another thread safely using Web Workers, however, they can’t access the DOM and manipulate it. That means you can only move heavy computations or lengthy network request calls, however, you can’t change what’s on the screen without ease with a Web Worker. There are workarounds, however, they tend not to be the best practice.

Since our React code runs on Javascript, the browser’s main thread handles executing the rendering loop. Let’s see what it looked like before Fiber.

React Before Fiber

The following is the process that React took before Fiber in order to render items on the screen:

1. React will create a tree of nodes when the user interface renders for the very first time. Each node in the tree represents some React element.
2. A virtual tree (called virtualDOM) is created which is a clone of the rendered tree.
3. Traversing the virtual DOM tree, React will update the DOM on whichever classes or elements need to be updated whenever a change occurs.
4. After any state change, React will compare every node from the two trees and pass on the changes to the renderer which ultimately draws it out on the screen.

This whole process would happen synchronously, meaning that once it was started, it could not be interrupted by another process until it was done. Given some expensive computation, it could potentially slow down how fast your app feels to your user.

Furthermore, the reconciliation and rendering to the DOM were not separated so React can’t pause its traversal of the virtual DOM to jump to processing another render. New render changes also can’t be inserted once the reconciliation process begins to run.

All of this prevents high-priority changes from being made until the virtual DOM stack is completely cleared and ready.

React After Fiber

No longer is reconciliation and rendering done in the same process. By doing so, Fiber can help you prioritize different updates that can happen. React calls this incremental rendering, which splits rendering work into chunks that can then be spread out over multiple frames.

It can do this by breaking up the computation of the virtual DOM tree into nodes, or “units” of work, that it can commit at any time. This allows you to pause, resume or restart computation for various components.

Let’s take a look at the process of rendering with Fiber. As mentioned before, reconciliation and rendering no longer happen at the same time and so the new process is broken down into two phases.

Phase 1 — Reconciliation

1. React makes a list of all the changes that need to be processed and then rendered to the UI. During this time, React can jump to processing another change as well.
2. Once this list is computed, React will then schedule the changes to be executed in the next phase.

Phase 2 — Commit

1. Out of the scheduled changes that come out of the reconciliation process, React can choose to render a specific set of changes.
2. Once committed, React notifies the DOM to render the changes that were found while in the reconciliation process.

While the reconciliation phase can be interrupted, the commit phase cannot.

By splitting things up into two phases, React is then able to prioritize which changes to make first. This helps you build high-performing React applications that aren’t laggy. Let’s take a closer look at all the benefits that Fiber brings to the table.

The Benefits of Fiber

1. First of all, you get improved performance. By being able to break the limits of the call stack and not having to wait on it to be clear, React is able to pause or start rendering work whenever required.
2. You can handle errors in a much cleaner fashion. Instead of showing the white screen of death whenever a Javascript runtime error occurs, you are able to set up error boundaries, which allows you to show a backup screen in case something wrong happens.
3. You get support for returning new render types such as fragments and strings. You can also return multiple elements from a render function as well.
4. It increases the performance of your user interface, allowing you to create advanced elements with animations, layouts, gestures and more.

Conclusion

Fiber is a rewrite of one of React’s core algorithms: the reconciler. The purpose of this algorithm is to take two DOM trees, compare the two and figure out what changes have been made.

Before Fiber, React would reconcile and render elements all in one shot. This would block the main thread in the case that there were a lot of deep changes in the DOM tree. With Fiber, however, the process of reconciliation and rendering is split up into two phases:

1. Reconciliation — React will figure out all the changes that need to occur based on the changes found in the DOM. It will then create a list of changes that need to occur. Since the algorithm uses the concepts of fibers, React is able to pause and resume this work at any time.
2. Commit — From there, React can decide on which set of changes to render and commit to one. Once the rendering process begins, however, it cannot be interrupted as you could with reconciliation.

By breaking up the process into two phases, React is better able to prioritize which work needs to get done to give a faster and smooth perception of your application.

From here, you can start to look into how you can really use Fiber to do cool things like animations and graphics rendering. For example, with the react-three-fiber library, you can create high-performing 3D models that live within your React app.

Once you start to understand all of the different moving parts for how React detects changes and how it propagates all the way to the renderer, you can start to truly tap into the benefits of what Fiber brings to build high-performing applications.