React is a popular JavaScript library that is used by developers to create complex and modern UIs (user interfaces). To identify which elements are to be rendered after certain changes are made by the developer, React uses a "reconciler", an algorithm that helps it compare two DOM trees and differentiate them from one another. React Fiber helps do this better.
Table of contents
What is React Fiber?
What is the purpose of React Fiber?
What are the features of React Fiber?
How does React Fiber work?
What is React Fiber?
React Fiber is a backwards-compatible, complete rewrite of the React core. In other words, it is a reimplementation of older versions of the React reconciler.
Introduced from React 16, Fiber Reconciler is the new reconciliation algorithm in React. The term Fiber refers to React's data structure (or) architecture and originates from 'Fiber' - a representation of a node of the DOM tree.
So, Basically...React Fiber is a concept of ReactJS that is used to render a system faster and smoother. React is one of the popular JavaScript libraries used to create a responsive user interface. React makes coding simple as compared to other frameworks.
What is the purpose of React Fiber?
Improved performance
- React Fiber is aimed at improving the perceived performance of complex React applications. It does so by allowing React to breaking the limits of the call stack. This lets it pause or start rendering work whenever required.
Better suitability for advanced UI
- React Fiber also increases the suitability of the React library to create animations, layouts, and gestures.
Control over the "priority" of work
Through its feature of incremental rendering, React Fiber lets developers split rendering work into smaller chunks and distribute it over multiple frames. This allows users to essentially control the "priority" of work.
Example- React Fiber could help you prioritise functions that originate from user actions while delaying logic of less-important background or offscreen functions to avoid frame rate drops.
More fluid experience
So by breaking up the work into smaller chunks that can be paused, resumed, or aborted based on a set priority order, React Fiber helps apps deliver a more fluid experience. Fiber lets React fine-tune the rendering to ensure that the most common use cases (or) the most important updates are computed at the earliest.
Specifically, it helps improve the speed of rendering components at start-up, as they could be made available to the browser before the entire bundle finishes downloading.
What are the features of React Fiber?
Supporting better error handling and recovering from errors
Rendering subtrees into DOM node containers (Portals)
Support for new render return types like fragments and strings
Returning multiple elements from a render function
How does React Fiber work?
Fiber brings in different levels of priority for updates in React. It breaks the computation of the component tree into nodes, or 'units' of work that it can commit at any time. This allows React to pause, resume or restart computation for various components.
Fiber allows the reconciliation and rendering to the DOM to be split into two separate phases:
Phase 1: Reconciliation
In the first phase, React creates a list of all changes to be rendered in the UI (an 'effect list', comprising of new and updated components).
Once the list is fully computed, React will schedule these changes to be executed in the next phase.
Note that React doesn't make any actual changes in this phase.
Phase 2: Commit
In phase two, also called 'commit' phase, React tells the DOM to render the effect list that was created in the previous phase.
While the Reconciliation phase can be interrupted, the Commit phase cannot.
So via Fiber, React is able to traverse the component tree through a singly linked list tree traversal algorithm. This algorithm can run in an "asynchronous" manner - allowing React to pause and resume work at particular nodes.