With the release of React v16, a new architecture of React came into light called — Fiber.
Created by Lin Clark, Fiber is the reimplementation of React’s reconciliation algorithm which enables the incremental rendering of the virtual DOM.
By incremental rendering, we mean that it can split the rendering work into separate chunks and spreads them out over several virtual stack frames to be executed. These small units of work can be monitored parallelly and enable prioritization of tasks.
The need for re-implementation of the stack algorithm was driven by the issue that the execution stack demanded to re-render the entire subtree in case of an update. Re-rendering the entire app for a single update is far from efficient and requires too much effort. It degrades the user experience and costly in terms of performance.
But with the re-implemented algorithm, it is now possible to update only the parts that need to be updated and can pause, abort, resume, or reuse the ongoing work whenever required or schedule it for later.
In this blog, we’ll get to know about the core concepts of fiber, its working and architecture, and above all, how is it better than the stack reconciliation algorithm. Let’s get started-
Core Concepts of React Fiber
There are three key concepts of React Fiber that you need to understand before you go deeper into learning how it works and how the fiber diffing algorithm differs from the old stack reconciler-
Reconciliation
Reconciliation, the algorithm behind the virtual DOM, is the process that keeps track of all the changes happening with the React component states. It is the algorithm for diffing two DOM trees and compute the parts that need to be updated.
When you render the react application, a tree structure made of nodes is generated which describes the application. Each node represents a react element. The tree is then passed to the rendering environment. Whenever state changes or props in the app update, a new virtual tree (called virtual DOM) is created.
The two trees are diffed and compared by their nodes to determine which operations are to update in the rendered application. The cumulative results are then flushed to the renderer.
React creates considerably different trees for different component types. While diffing the trees, react compares the root elements. Now, there are two cases -
- Whenever the root element appears to have a different component type, React.js destroys the previous tree and creates a new one from scratch to replace it.
- While comparing the root elements of the same type, react compares their attributes and updates only the changed attributes.
Rendering
A very important aspect of Fiber architecture is that rendering and reconciliation are two different phases here. While the reconciliation phase determines which parts of the application are updated, the rendering phase uses this information to actually update the parts in the rendered app as computed by the reconciler.
Scheduling
The scheduling is the phase that determines when the work is to be performed. Scheduling of work can be done either on a priority basis or time basis. The term ‘work’ refers to any kind of activity or operation needed to be done in an application.
There is plenty of work to do while rendering a React application. Some of it needs immediate attention while others can wait for a while. Therefore, the work is defined as high-priority work and low-priority work respectively. The high-priority work is therefore scheduled before the low-priority task. While all of the updates have different priorities, it is easier to differentiate them.
How Does React Fiber Work?
Now that we have comprehended some of the core concepts of React Fiber, we will move ahead and learn why did we need to introduce a new diffing algorithm while we already had the old stack reconciliation algorithm?
In the old algorithm, React.js could not be able to separate the reconciliation and rendering phases. As we know that JavaScript is a single-threaded process and renders synchronously to the DOM. The problem with the stack reconciler was that it would continue to render to the end of the main thread and will continue in the traversal path recursively until the execution stack was empty.
The main thread cannot abort or pause the processing to jump on to a different render, in case a high-priority update appears, in the middle under any circumstances. There is no way to break the rendering chain in the stack algorithm.
Now consider another option, let’s suppose you were able to customize the call stack, manipulate it at your will. Wouldn’t it be great to have your hands on such an ability?
Well, that’s exactly what React Fiber does.
Instead of using recursion to walk the traversal path, the React Fiber uses a linked-list tree traversal algorithm where each fiber node is connected through the child, sibling, or return references.
The fiber structure uses scheduling as the driving concept. Fiber is a virtual stack frame that represents an instance of a component and these virtual stacks are saved in the memory. Therefore, they can be used however or whenever you want to achieve the end goals of scheduling.
The Fiber structure accomplishes many tasks that include:
- Assigning priority to different tasks
- Pausing the ongoing work and resume it later
- Ability to reuse, resume, and rebase the ongoing work
- Splitting of an interruptible work into multiple chunks that can be executed independently
- Ability to abort the task, if not needed anymore.
Now, let’s move ahead and see what are the members of fiber architecture -
Fiber Architecture- The fiber structure consists of the following building blocks, as we can say -
{
stateNode,
child,
siblings,
return,
alternate,
type,
key
}
child and sibling
All the fiber nodes are connected via field points of singly linked-tree traversal algorithm, i.e. child and sibling. They describe the recursive tree structure of Fiber.
The child fiber corresponds to the value returned by the render() method. If it returns multiple children, the others are accounted as siblings.
For instance -
function Parent() {
return <Child />
}
In the above case, the child fiber of Parent is Child.
In another case -
function Parent() {
return [<Child1 />, <Child2 />]
}
Here, the Child1 is the child fiber of Parent and Child2 is the sibling of Child1.
type and key
The type of fiber represents the component that the current fiber node links to. The type determines whether the component is a string, class, function, or DOM element. Whereas, the key acknowledges all the updated, removed, or added elements and determines whether they can be reused or not.
return
The return fiber can be considered as the parent fiber as the program returns to it after processing the current one. In the above example, Parent is the return fiber of Child1 and Child2.
After processing the child fibers, the program will return to the parent fiber.
Click on React Fiber to learn more about React Fiber.
Sum Up
The React Fiber structure, besides having a promising algorithm, possesses many practical advantages that make the application rendering a fun experience which was earlier considered a grim and complex task. Some of those benefits are -
- Faster and effective UI rendering
- Optimization of priority task execution
- Extensive browser compatibility
- Adoption of the principle of ‘Virtual Stack’
- Asynchronous rendering
- Better error handling
- Seamless user experience
Another captivating feature of React Fiber is its ability to define work as per its priority. The fiber reconciler assigns priorities to the tasks and allows preferences to high-priority tasks over low-priority tasks through incremental rendering.
This is just but a beginning! Now that we have seen its wonderful features and practical advantages, it is safe to say that the future of React Fiber is very bright and holds a lot in store for us.
Thanks for reading!! If you liked it, don’t forget to hit the clap icon.