React Fiber

React 16.0 was released with an update to the React core algorithm. This new core architecture is named “Fiber.”

Meta 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 also added, like Asynchronous Rendering, Portals, Error Boundaries, 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.

React Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM.

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.

Fiber Reconciler has different goals:

• Ability to split interruptible work in chunks.
• Ability to prioritize, rebase, and reuse work in progress.
• Ability to yield back and forth between parents and children to support layout in React.
• Ability to return multiple elements from render().

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.

React Fiber performs reconciliation in two phases: Render and Commit.

The earlier whole reconciliation process was synchronous (recursive), but in Fiber, it is divided into two phases.

Render phase (a.k.a. Reconciliation phase) is asynchronous.

Problems with Old Implementation:

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

Fiber Solution: