React was tough for me at the beginning to learn it and it got me one year to
get used to it and now I love it! But recently React Fiber went live and
there is not only that! Facebook developers did refactor the whole code
from scratch? Should you be worried about it? let's find out!
First of all before explaining what React Fiber is for those who doesn't
know what React is let me briefly explain. Basically React is one of the
most popular JavaScript frameworks developed by Facebook developers and it
is well known primarily because of the performance benefits and React Fiber is
the new release of React or else they call it React version 16. For those who
are familiar with React the first question that it is coming to your mind
when someone is refering to a complete rewrite of the code is this... should I be
worried that I need to learn again from scratch React's new version? Fortunately
the answer is NO. As Adam Wolf officially said React Fiber is a complete backwards
compatible rewrite of the React core. That simply means that if you are
already using React to your applications and upgrade to React Fiber you will not
notice any differences at first and there is no need to worry about
rewriting the app. With that said another question is also coming to my mind why
React Fiber was built at the first place? There is no argue that React is very
very fast. React team however wanted to also take advantage of scheduling so
they took the algorithm of React one step further. As it's also written at the
official documentation React Fiber's primary goal was to create a library
That can:
Pause work and come back to it later.
Assign priority to different types of work
Reuse previously completed work
Abort work if it's no longer
needed and in order to do it the only way was by refactoring the whole code
Now if you didn't understand completely the goals don't worry as in this video
we will explain later with a cartoon and an easier way all the goals that I did
just mention. For now the important thing to understand is why a refactoring of the
whole code was required... what I was saying? Oh yeah!
So why should I care or
else what is the key benefit of React Fiber really! The main key benefit of
React Fiber is... performance! As you can see to your screens on the left is React
version 15 or else React Stack as they call it with some very heavy
calculations and on the right we have React Fiber with the same calculations
As you can also see in comparison React Fiber is taking priorities and as a
result we can see a smoothly transitioned animation for the final user and I think
we are now ready to go into some more details! So what exactly is Fiber? In
simple words the new version name is Fiber as the new algorithm represent a
unit of work... as simple as that... that's it!! So what is unit of work... Lin Clark
couldn't explain it better for me so let's see
I've talked about this a little bit before. When you're building a website
it's kind of like your code is the project lead on this website
Unfortunately it only has one employee, it only has one worker that's working to
build this website and that's the main thread. So the main thread is kind of
like a full stack developer it does DOM, JavaScript, layout it does all of these
things. And as long as it spends time doing the JavaScript update it can't do
these other things. It can't do layout! And I've said before when you use React,
how it helps with that is it knows how to work better with the main thread. It's
kind of like a technical lead that knows exactly how the main thread works
and so it makes a main thread more efficient in its work it can direct the
main thread in its work by minimizing and batching DOM changes. What Fiber does
is basically teach this technical lead some basic project management skills
like how to split up work and how to prioritize work and it also gives the
technical lead a watch. So that it can keep track of how much time has passed
So how do these new skills come into play? How do they change the way that the
Reconciler works? As you did also see React Fiber is splitting your tasks into
many units of work in order to the main thread to always do what is more
important to the user such as updating UI rather than waiting everything to be
done in order to update it! OK, that's easy to understand but we've already
heard an unknown word what is the Reconciler?! You will hear a lot
about the Reconciler and Reconciliation and we cannot skip
this terminology as it is very important to understand what Fiber is. Reconciler
is the algorithm of React Fiber. It is the decision maker that will decide
which task the code will run and when. And surprisingly this is not new in
React! We had the Reconciler in React when it
introduced the virtual DOM feature. We just didn't use this terminology that
much as we were referring to it as the virtual DOM and
we are now naming the old React algorithm as React Stack
So if you see comparisons between React Stack and React Fiber, React Stack is
basically the older version of React or else React version 15. Lastly let's see
from Lin's presentation a more specific example of React Fiber so we can fill
any understanding gaps. Let's start an update and see how this is filled in. So
to start the update we click the button this is calling setState. When setState is
called React will add the update to an update queue. So a list of updates on the
list... and then react goes to schedule the work that's gonna have to happen to
make this a reality. When setState is called the app let React know that it
doesn't need to have this happen it doesn't need to do this work immediately.
React can schedule this as deferred work so it can schedule it to happen later.
And to do this it uses a function called requestIdleCallback. This is basically
like React saying to the main thread "let me know when you have some spare time
and we'll do this work". For browsers that don't support requestIdleCallback
React will Polyfill it (basically this is a fallback for older browsers)
and so when the main thread has some free time - once it's
done with its work - it comes back to React and it knows how much time it has
to spare so this could be a few milliseconds or it could be up to 50
milliseconds if there are no frame scheduled in the near future. So the
main thread has come back and we're gonna start building up this
work-in-progress tree and we'll fill it in with a function called workLoop. The
workLoop is what gives Fiber this appearance in the timeline. It
allows React to go down do a little bit of computation and then come back up to
let the main thread get to whatever other work it needs to do. And in order
to do this it needs to keep track of two things. It needs to keep track of the
next unit of work that it needs to work on and it also needs to keep track of
the time remaining it has with the main thread. So React and the main
thread get started. And they're gonna start in their first
pass through the workLoop, they're gonna start with the hostRoot. With these
priorities what we want to have happen is for higher priority work to jump in
front of low priority work. Even if the lower priority work has already been
started! Again I think looking at this in context will help you understand how
these priorities work, so let's see in the last example instead of having that
font resize increase we have an urgent react update button! The user clicks the
button and this puts a callback in the main thread's queue but the main threat
not gonna take care of it until the deadline is reached... and when it is then
it takes care of that callback which calls setState. Then react is going to
add this to the list of updates. But because it's a high-priority update it
butts in the queue. It jumps ahead of the low priority update that we were already
working on and this means that when React starts work again it doesn't start
on the next unit of work that it was going to... that was planning to! Instead it
restarts with the hostRoot and it basically throws away all of this work
that it's done. And then React will go through the higher priority update and
commit. And then it will start back over again at the beginning of that lower
priority update. As a quick summary everything that was just mentioned are
happening at the background so you don't have to worry much if you don't know
every small detail of the algorithm. These were the basic information that we
need to know about React Fiber before starting reading all of the docs about
it and see some code. For some people, it may sound too little as information but
it's really REALLY important to know all the basics before reading the details
about React Fiber architecture. I was struggling a lot to find a video that
is explaining in very simple words what React Fiber is and that was the main
reason that I did create one! If you want to know more details, I will definitely
suggest to start with the talk of Lin Clark at React Conf 2017 as this video
has every detail of how the algorithm works without too much code and... that's
basically it guys! I hope this video helps you understand some basics about
React Fiber and I hope you did like the video. As always if
you did like the video don't forget to like the video below ⬇ If you did like the
content and you want to see more don't forget to subscribe and I will speak you
guys to the next video. Bye!