What is React Fiber?

React Fiber is a concept of ReactJS that is used for rendering a system faster and smoother. React is one of the popular JavaScript library which is  used to create a responsive user interface.React makes coding simple as compared to other frameworks.  After certain changes who is the next element to render the system called reconciler.This algorithm helps them to  compare two DOM trees and differentiate them. React fiber helps to do it better.

React Fiber is an internal engine change which is made for making  React faster and smarter. The Fiber reconciler, which became the default reconciler for React 16 version and above, is a complete revise of React’s reconciliation algorithm to solve some long-standing issues in React.

Objectives of React Fiber 

Fiber focuses mainly on animations and responsiveness. It has the ability to split the work into chunks and prioritize important tasks. We can pause work and resume later. We can also reuse previously completed work or maybe abort it if it is notrequired. As compared to the old React reconciler, it is asynchronous.

As React Fiber is asynchronous, it allows us to break away from the limits synchronous stack reconciler. Previously, wecould add or remove items, for example, but it had to work until the stack was empty, and tasks couldn’t be interrupted. Now the priority work can be done faster by keeping other tasks on hold and resuming once important tasks are completed.

How does React Fiber work?

Lets have a look at how react fiber is implemented. React Fiber is just plain javascript object with some properties. The core underlying idea is that the fiber also represents a unit of work.

React first processes those fibers, those units of work and we end with something called finishwork().Then, it commits the finished work resulting in visible DOM changes.These changes happen in two phases i.e the render phase and it is during this phase that the processing happens and the commit phase

Render phase: This phase is asynchronous. During this phase, React does all sorts of asynchronous things behind the scenes which are not visible to the user. 

With fiber being asynchronous come increased opportunities like making react faster and increasing performance etc.React can prioritize tasks. It can  Pause some work or maybe even discard others.React processes all of the fibers, which represent the unit of work. During this phase, internal functions of react like beginWork() and completeWork() are being called. Those process all of the fiber.

Commit phase: During the commit phase, there is a function commitWork() that is being called. Commit phase is synchronous and can’t be interrupted.

Whenever React processes a fiber it either handles the work directly and/or schedules it for the future. Using the feature called time-slicing react can split work into chunks. If some work(components) has a very high and first priority like animation; and react can schedule it in such a way that it gets control as soon as possible. But if some work (components) has low and second priority. For example, a network request react can simply delay it for as long as it needs. It make use of a function() requestAnimationFrame() and requestIdleCallback() to do that.and

request AnimationFrame() – Schedule for high and first priority function() to be called on the next react animation frame. 

requestIdleCallback() – Schedules a low and second priority function() to be called during an idle period.

Those two functions are supported in the majority of browsers.

Structure of React Fiber: Whenever we change state that is work, and whenever there is a react life cycle function that has to be called that is work, whenever there is an update that leads to change in the DOM (Document Object Model )that is considered work. We can see that work heavily depends on the react fiber.

function App() { // App
    return (
        <div className="wrapper">// W
            <h2 className="h2">Heading h2</h2>
            <h3 className="h3">Heading h3</h3>
            <h4 className="h4">Heading h4</h4>
        </div>
    );
}
ReactDOM.render(<App />,
    document.getElementById('root')); 

Output :

In This code shows us the root directory. Imagine a react fiber tree starting with node <div>. This node has children h2, h3, and h4. Fiber renders <div> first because it is a root, then it renders the children.  h2, h3, and h4 are siblings of each and every other. 

Rezact Fiber Tree: There are actually 2 trees. The first one is know as the current tree and the second one is know as workInProgress tree. The current tree is that, what is currently visible on the web page or screen. So it makes sense that React can not make a change to it, for the reason that it could result in an inconsistent UI and all sorts of inconveniences. React instead of makes changes to the work in progress tree, and it simply swaps pointers at the very end. Now workInProgress becomes a current and present tree, and the current tree is the workInProgress tree.

React effectively runs an internal timer for each unit of work being execute and constantly monitors this time limit while performing the work.

The moment the time runs out, React pauses the current unit of work, hands the control back to the main direction, and lets the browser render whatever is finished at that point.

Then, in the next frame, React picks up where it left off and continues buildings the tree. Then, when it has enough time, and it commits the workInProgress tree and completes the render. Thus this is how the React Fiber works and is essential for developments.