React Fiber: Reconciling the Rumours with the Facts

If modern JavaScript frameworks are your thing, you've probably heard people talking, recently, about React Fiber.

It's possible that you are super-excited about the "next version" of React and can't wait to harness it to transform your apps into lightning-fast testaments to the power of the modern web. Then again, considering the frustratingly-fast pace at which JavaScript frameworks spawn, evolve, and die, it is also possible this Fiber thing has sent you spiraling into a paralyzing state of intense panic!

Either way, you should probably take a few deep breaths. The goal of this article is to put your mind at ease and hopefully clarify some misconceptions surrounding Fiber.

What is Fiber?

First, we should cover what Fiber is not. Fiber is NOT a new framework and it does not bring any breaking API changes to React. Repeat, it does not bring any breaking API changes.

Instead, React Fiber is a ground-up rewrite of React's core algorithm. Fiber changes the internal workings of React, not React's external API, although, it does allow the React team to add some nice features (like supporting returning arrays from render).

How Does It Work?

React Fiber is a rewrite of React's reconciler. In React, the reconciler is responsible for the diff-ing and updating of React's virtual DOM. It updates virtual DOM elements before sending them to the renderer. Keeping the reconciler separate from the renderer allows React to work with renderers that target different platforms (ie: React Native).

In the current version of React, when a component updates, the reconciler updates the component's internal representation and sends the update to the renderer, re-rendering the actual (often HTML) DOM, before moving on to the element's children. It continues this process through the entire tree until it runs out of changes to implement, performing all updates and all necessary re-renders, in a single tick. The problem with this is long-running JavaScript processes block the browser from doing anything else. If this process takes too long, frames are dropped, and rendering becomes janky and slow.

The new reconciler (called "Fiber"), handles the updates of each element one at a time, pausing, allowing the browser to do anything it needs to do (respond to user-interaction, layout, re-render, and garbage collection), before moving on to the next element.

The Fiber reconciler no longer sends individual element updates to the renderer. It records the updates in another virtual DOM representation known as the work-in-progress tree. The work-in-progress tree keeps track of specific changes. Only when the entire tree is ready, does it send the updates to the renderer.

Fiber also prioritizes updates in alignment with how important they are to perceived performance. Updates of the very highest priority execute immediately. Other updates are scheduled, running only when the browser is free to perform tasks.

If a high-priority update is scheduled before another, lower-priority, update has completed, the work-in-progress tree that the old update was assembling is discarded and started anew. Important updates, like animations, never have to wait behind updates that are less important to perceived performance.

Will Fiber Break My Existing App?

No. The React team takes great care to avoid releasing API changes that break applications out in the wild. They usually add deprecation warnings a few versions before an API is actually removed from the codebase. They even provide scripts to help developers migrate to the latest versions.

Facebook has already battle-tested Fiber in their more than 30,000 components (yes, they are running it on Facebook). There will be some deprecations in React v16, but they are not related to Fiber, and if your app is running v15.5 with no deprecation warnings, you are already ready for react v16.

What Can Fiber do for Me?

For one thing, Fiber will help keep your apps running at a smooth 60fps, goodbye jank! Fiber also cleans up some long-standing issues. One of the goals is to make it easier to add new features and write custom renderers.

I Want Fiber Now!

You can install React v16 from npm by specifying the alpha version when installing.

yarn add react@16.0.0-alpha.11

Or, if you're really eager, you can download the React source, and build it yourself, following the instructions here. Fiber is still in development, so proceed with caution.