What is React Fiber and how React works?

If you are someone into front-end development, it is most probable that you have heard of React JS. It might be difficult for you to understand React JSand why it is commonly used in the first place as a front-end library to make the UI of a website.

In this article, I will tell you about React JS, its use cases, features, React fiber, and much more.

Let’s dive in.

Introduction to React JS

About a decade ago, the website development process commonly included technologies such as HTML, CSS, and Vanilla JavaScript.
This way, the development speed is much slower as compared to today. It is not easy to develop a website & maintain the website’s UI in sync with the state.

React JS was developed by a Meta (previously Facebook) software engineer. Its first use was said to be in Facebook’s news feed in 2011 and later used for Instagram in 2012.

React JS was launched as an open-source Js library in 2013 for all front-end developers. Since then, react is emerged as a leading front-end framework for Js. And today is one of the beloved & widely-used Js frameworks by fortune 500 companies.

Need of React JS

Previously using Vanilla Js, its a headache for front-end developers to develop complex web apps, and a lot of time is needed to design the UI of our website.

Using React JS, it is now easier for front-end developers to develop the UI of a website with less code needed if we compare it to vanilla Js.

React JS is mainly used for developing single-page applications (SPAs). React JS helps us to change the data on our website without actually reloading our whole website.

Advantages of React JS

1. Virtual DOM:- When we use vanilla Js to develop a website, it uses real DOM. It reloads the whole website even when only one part is modified or updated. React JS uses Virtual DOM instead of real DOM. Virtual DOM solves the problem of website refresh by only refreshing that particular part of the website which gets modified or updated.
2. JSX:- We can also expand JSX as JavaScript extensible. JSX helps us to combine our HTML code with react. Babel is used as a transpiler to convert our JSX code into Js syntax.
3. React components:- React components are one of the main reasons behind the increasing popularity of React JS as a JavaScript framework. Multiple components combine to form the structure of a website. We can re-use these components later on in the website if needed.
4. Performance:- React JS also helps us to improve the speed of our website with the help of virtual DOM. When we refresh a react JS app, it only refreshes the modified/updated component. It saves us reload time.
5. Application development speed:- React JS also increases our development process. There are many reasons for this. Such as reusable components, less code required compared to Vanilla Js, multiple tools and technologies available in React ecosystem, etc.
6. Mobile App Development:- Our React JS learning is also helpful if we want to develop a mobile app. React Native is one of the cross-platform (Android & IOS) app development frameworks, where our React JS knowledge helps us to build a mobile app. It is one of the most-demand app development frameworks today.
7. Large Community:- React launched about a decade ago (in 2013). From 2013 to today, React evolved a lot & developers using react also increased to hundreds of thousands. Unlike a new framework like Svelte, React has plenty of tutorials and queries asked online. It is easier for a new developer to get started with react. React also has official documentation by Reactjs.org.
8. React Ecosystem:- React also has a large ecosystem of various tools and frameworks addressing different needs. As an example-Next.Js for SSG (server-side rendering), Gatsby for building static websites, Webpack as a module bundler, and so on.

What is React Fiber?

React 16 included React fiber for the first time. It is one of the core algorithms that are working behind React JS. It does many things under the hood.

One of the primary responsibilities of React fiber is the smooth rendering of our website animation and gestures. It also divides the whole rendering work into multiple frames. It also adds the ability in React JS to define the priorities for each frame, re-use them, or abort them.

The below image demonstrates the basic functioning of React Fiber.

React Fiber Example

Now that we know what React Fiber is, it’s time to understand it with the help of an example.

It is not easy to understand the example right here. So, I am giving a link to Codedamn Playgrounds, on which our program is available.

Click here to see the example.

Working of React

React JS is nothing but a UI library that handles trees. React JS knows how to differentiate between two virtual DOM trees and then tells the renderer (in this case browser is the renderer) about the differences that need a modification on the screen.

For example- If we have 100 hello worlds on our screen, a virtual DOM is created for them. If we click on the 5th hello world on our screen, a new virtual DOM for the modified state. Now, it will compare both virtual DOM and see that only the 5th hello world is changed. After that, it will only update the 5th hello world instead of refreshing the whole screen.

Now when developers realize that this behavior is incredible and this had to be generic. So, they split React JS into two parts. The first part is the reconciler, which uses the difference between trees to understand what’s happening between them & only updates the part needed instead of refreshing the whole website.

And the 2nd part of React JS uses the renderer. So, in this case, react JS needs to know how to create elements on the screen. For example, React JS needs to know about the document. Create element. React DOM does this.

Here, React DOM plays a vital role. When a component’s state changes, React JS creates a virtual DOM of the modified UI. Now that React JS has an original virtual DOM of the UI and the modified virtual DOM of the UI. React JS looks into both the virtual DOM aside and finds out the differences between the two. The components found after differentiating both DOMs will only be modified, instead of refreshing the complete UI.

Conclusion

In this article, we studied about React JS, its features, advantages, react fiber, and working of React JS. I hope that this article helped you to understand React JS and its working. You can follow Codedamn’s React course to learn React JS from beginner to advanced level & many projects are also available in Codedamn’s Projects section.