React Fiber in simple terms
React has this massive update came in the React V 16 introducing Fiber, which created a lot of questions of learning React from scratch. But React Developers answered all the queries very precisely and helped us believe that there is no need to interpret such rumors.
React Fiber is a very predominant update given from the developers and has changed the way how Main Thread handles everything internally and alone.
But the true fact is that its not the Main Thread that does the work smartly here. Of Course, the main thread is smart and strong, but with the advancements of this update from React Developers, Main thread is even more smarter and effective now.
I am here to help someone who is seeking to understand the React Fiber and needs to understand the core functionality of its working. I will keep this short, but I am sure, by the end of the road, you will get a good understanding of what Fiber is, and how it works.
Lets Begin…
We all know that Main thread is the sole and heart of Frontend Development. Even if we are doing Vanilla or using some Framework or Library, Main Thread is the only one who takes care of all. Its like an agent sitting on the client end that does the work for Layout updates, Event tasks, data rendering and everything we see. But the important fact is that, it is alone. There is no one to help it. So, how does it do that. It used CallStack. So, based on the stack is does the tasks and makes our life simpler.
Now, If Main Thread is so capable of doing all stuffs, why do we need React Fiber to kick in and do any magic. The fact is, for any normal rendering, the main thread is so busy that sometimes it gets stuck under the Work Loop and thats how we see poor performance of our application.
Now, The Role of React Fiber here is that it manages the Main Thread for its own work. See the clear picture here. Main Thread has its own personal tasks of layout updating and React has its own to render the UI based on the setState or any updating callback. So, how does it manages the Main Thread.
The React Fiber is like an advanced already instructed Manager which manager its sole employee Main Thread. The Main Thread has a list of task items it need to get done from Main Thread. All the task items it has have priorities. Based on priority of any given item in the sequence of list, it requests the Main Thread to work on it. But wait, Main Thread is not available everytime a setState is called…. :(
To tackle this, the Manager gives a ‘requestIdleCallback()’ to the main thread and then the Main Thread lets the manager know when and for how much time it is free next.
Lets assume that on a certain time t, the Main Thread has n units of time available for a certain k work.
It comes, completes the task and once the times runs out, it goes back to do what it was doing before. And that is how, Main Thread is being managed by the Manager React Fiber.
Now the important question here is that what if there is any priority update that came across the Manager and it has to get that done at the earliest.
Now in this case, the manager sends a callback to the Main Thread, but this time with a flag of higher priority. Once the request reaches to the Main Thread, it stacks that task at top priority out of the other task items from the list of tasks of React it has before. And once it gets time, it completes that task.
There are certain questions around Starvation as well, but it is also being managed really well by the React Fiber. The Mantra is very simple, it does not always follows sequence. The list the Fiber has, is being updated based on priority and its time of arrival. There is a fine balance between these two. This is being very well explained by the React Fiber developers in this link. Please have a bing watch for this for sure. Its Really Helpful.
Last Important thing to know that React Fiber can make Abort the Tasks in Progress as well as long as it is in the Reconciliation phase. Once a certain task enters the Commit phase, it cant be undone and gets updated by the Main Thread.
I hope this might have created some vision of how Fiber works. I will dive more deep into it into the coming Blogs of this Series.
Happy Development
Hariom :)
