Understand React Fiber in a simplified way

As we all know ReactJs is getting too much popularity because of its simplicity and performance. There are lots of factors for its performance but its new reconciliation algorithm “React Fiber” is playing a very crucial role.

So in this blog, I will try to explain how react fiber works under the hood.

What is React Fiber?

React Fiber?is the new?reconciliation algorithm. Reconciliation is the process of comparing or diffing old trees with a new tree in order to find what is changed or modified.

Why introduced react fiber?

React 16.0 was released with an update to the React core algorithm. This new core architecture is named “Fiber.” Facebook has completely rewritten the internals of React from the ground up while keeping the public API essentially unchanged; in simple terms, it means only changing the engine of a running car.

With this release, some new features are added, like Asynchronous Rendering, Portals, Error Boundaries, and Fragments (i.e. return array of elements). Incremental rendering is the headline addition to React, which adds the ability to split rendering work into chunks.

Also, in the original reconciliation algorithm (now called Stack Reconciler), the processing of component trees was done synchronously in a single pass, so the main thread was not available for other UI-related tasks like animation, layouts, and gesture handling.

visit here

How does react fiber work?

A?fiber?(not Fiber with a capital ‘F’) is a JavaScript object that contains information about a component, its input, and output. At any time, a component instance has at most two fibers that correspond to it: the current fiber and the work-in-progress fiber. A fiber can be defined as a unit of work.

Fiber prioritizes work on 7 levels:

1. NoWork — no work is pending.
2. SynchronousPriority — for controlled text inputs. Synchronous side-effects.
3. TaskPriority — completes at the end of the current tick.
4. AnimationPriority — needs to complete before the next frame.
5. HighPriority — an interaction that needs to complete pretty soon to feel responsive.
6. LowPriority — data fetching, or results from updating stores.
7. OffscreenPriority — Won’t be visible but do the work in case it becomes visible.

React Fiber performs reconciliation in two phases: Render and Commit

1. Lifecycle methods called during the render phase:

• UNSAFE_componentWillMount()
• UNSAFE_componentWillReceiveProps()
• getDerivedStateFromProps()
• shouldComponentUpdate()
• UNSAFE_componentWillUpdate()
• render()

2. Lifecycle methods called during the commit phase:

• getSnapshotBeforeUpdate()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

The earlier whole reconciliation process was synchronous (recursive), but in Fiber, it is divided into two phases. The render phase (a.k.a. Reconciliation phase) is asynchronous, so three of the lifecycle methods were marked unsafe because putting the code with side-effects inside these methods can cause problems, as lifecycle methods of different components are not guaranteed to fire in a predictable order.

React Fiber uses?requestIdleCallback()?to schedule the low priority work and?requestAnimationFrame()?to schedule high-priority work.

Problems with Current Implementation:

• Long-running tasks cause frame drops.
• Different tasks have different priorities.

So in a nutshell, what makes Fiber interesting?

• It makes apps more fluid and responsible.
• In the future, it could parallelize work a.k.a. Time Slicing.
• It would improve startup time while rendering components using React Suspense.

Fiber is currently available for use but it runs in compatibility mode with the current implementation.

Thanks for reading this article and I hope it enhances your understanding of the react fiber ????.