Have you heard about React Fiber?
This article is for those people out there who know a little about React (if not, don’t stress out I’ll explain about react too 😉) or have been using react for quite a while and have a really good understanding with it.
React only provides you the “view” in MVC, you need to solve the M and C on your own. Never heard of MVC? It stands for ‘Model View Controller’, is a software design pattern for developing web applications. It means you can choose any of your own libraries as you see fit…hurrah🎉! You are not bound to anything, you can create your own libraries and can integrate them to React. Isn’t it a good thing? However, you may need to take care of the corresponding updates and migrations of libraries you added by yourself.
Well, I’m not here for the React thing, see the title, i’m going to talk more about React Fiber and what wonders it can perform. React is fast no doubt and is working at a really good speed but suppose you have two components in you application and you are using the first component but the second component also wants to do something and it’s more urgent, how will you tackle that or how will react solve it? The first had to complete its process before it can give the control to the second component or the first component terminates its process and give control to the second component, it’s kind of really bad 😕. But hold on, this is where React Fiber comes, with Fiber, React can pause and resume work at the choice to get working on what matters as soon as possible and then resume from where it left. Amazing right.
Let’s get deeper. You have a tree of components. React will walk through the tree and creates a virtual model of the end result. Now if a render function calls or app updates, React will do the process of creating the virtual result over and over again. Each time, it compares the previous virtual tree to the nex t one. If you are rendering to the DOM, it could be that only one class on one element changed or it could mean creating the whole virtual result again. Heard of reconciliation? Reconciliation is the algorithm React uses to differ one tree from another to determine which parts need to be changed. During reconciliation data from every React element returned from the render method is merged into the tree of fiber nodes. Every React element has a corresponding fiber node. Unlike React elements, fibers aren’t re-created on every render. These are mutable data structures that hold components state and DOM. If you want to use React Fiber i’ll strongly recommend you should get familiar with the following topic before continuing :
- React Components, Elements, and Instances
- React Basic Theoretical Concepts
- React Design Principles
These following links could be very helpful too if you want to know more:
I hope from with this article you got pretty much idea what React Fiber is and does. Don’t forget to subscribe to our newsletter for more exciting news articles. Peace out✌.
By Farhan Rafaqat
Enou is a design centered agency based in Lahore. Our mission is “To reinforce businesses and start-ups by creating value in their work, through our digital services” and the driving force that keeps us motivated is our desire for perfection. We truly believe in the transformative power of illustration and design and their ability to simplify communications, elevate experiences, engage and inspire people because in the end, what they see is what they believe!