React Fiber is an internal engine change that allows React to break the limits of the call stack. It’s creation enables React to pause/start rendering work at will. Eventually, React users will be able to hint at the “priority” of work.
Currently, we can’t directly interface with it, so why should we care about it? Because it’s really freaking cool dude !
React before Fiber was like Mobile without Sim.
Imagine being in the middle of a huge feature, and your boss needs a hotfix, pronto. You can’t stop working though because all your changes are in one file, you’re committed to finishing this work.
If we were using git, we would be able to commit our work to a branch, and switch to a quick hotfix branch.
With Fiber, React can pause and resume work at will to get working on what matters as soon as possible! 🎉
React Internals in a nutshell 🥜
You create a tree of components. React takes this tree, walks through it, and creates a virtual model of the end result. Perhaps you are rendering to the DOM, perhaps you are targeting native. At this point, that doesn’t matter to React.
Now, as your app updates, React will do that process of creating the virtual result over and over again. Each time, it compares the previous virtual tree to the next one.
At this point, we get platform-dependent. If you are rendering to the DOM, it could be that only one class on one element changed. React will walk through the virtual tree, find what’s changed, and update as little as it can.
This could mean updating one class attribute, or it could mean tearing down the whole DOM. This is Reconciliation.
Before Fiber, this was it. The work was laid out, and the renderer of choice got to work. Even if the browser was lagging, the user was typing, or the planet was about to explode, the render train wouldn’t stop. 🚋
What is Reconciliation ? Let me break it down in simply terms.
The Algorithm react uses to diff one tree with another to determine which part to be Changed .
Reconciliation is an algorithm behind what is popularly understood by "virtual Doom"
The Keypoints to remember are:
in "UI" it's not necessary for every update to be applied immediately; in fact, doing this can be wasteful, causing frames drop and degrading the user experience.
different types of update have different priorities- an animation update needs to complete quickly than, say an update from data store.