Understanding React Fiber Architecture
Join the DZone community and get the full member experience.Join For Free
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 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 algorithm. Reconciliation is the process of comparing or diffing old trees with a new tree in order to find what is changed or modified. 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
Sierpinski triangle rendering using Stack and Fiber:
You may also like: Everything React: Tutorials for Beginners and Experts Alike.
In the above example, there are two different kinds of updates going on — one that makes the triangle narrow and wide which has to happen every 16ms (60 FPS) in order for the animation to look smooth and one that updates the numbers contained inside every single dot, which happens approximately every 1000ms.
Fiber prioritizes work on 7 levels:
- NoWork – no work is pending.
- SynchronousPriority – for controlled text inputs. Synchronous side-effects.
- TaskPriority – completes at the end of the current tick.
- AnimationPriority – needs to complete before the next frame.
- HighPriority – an interaction that needs to complete pretty soon to feel responsive.
- LowPriority – data fetching, or result from updating stores.
- 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 render phase:
2. Lifecycle methods called during commit phase:
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, 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.
Published at DZone with permission of Aditya Srivastava. See the original article here.
Opinions expressed by DZone contributors are their own.