BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

React Fiber: A Closer Look at the New Engine of React

| by David Iffland on May 01, 2017. Estimated reading time: 2 minutes |

Facebook is working on a completely new architecture underpinning React, their popular JavaScript framework. The new design, dubbed React Fiber, alters how and when changes are detected in order to improve perceived responsiveness on browsers and other rendering targets.

The new architecture first became public in July 2016 and has been an ongoing concern at Facebook for the last couple of years. It is meant to be a backwards compatible, ground-up rewrite of React's reconciliation algorithm. This process is responsible for determining when a change has occurred and passing that change on to the renderer.

Effectively, the team is building a cooperative and prioritized task scheduler on top of the single-threaded JavaScript engine. In the original reconciliation algorithm (now called the Stack Reconciler), the Virtual DOM diff walked the entirety of the component tree:

It is important to understand that the stack reconciler always processes the component tree synchronously in a single pass. The stack reconciler can't pause, and so it is suboptimal when the updates are deep and the available CPU time is limited.

Compare that with the Fiber Reconciler which has different goals:

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

Put more simply, instead of waiting for changes to propagate throughout the component tree, React Fiber knows how to stop every once in a while and check for more important updates. Much of this scheduling ability is based on the use of requestIdleCallback, a W3C Candidate Recommendation.

At React Conf 2017, Lin Clark presented an introduction to React Fiber to give developers a step-by-step, visual walkthrough of how the new reconciler differs from its predecessor.

For the most part, developers won't have to worry about their code, but there may be some apps out there that rely on certain lifecycle hooks happening in a predictable order. Because this order is no longer guaranteed, there may be issues.

"To make sure this doesn't break apps", Clark says, "the Fiber team is working on a graceful upgrade path for this".

Dan Abramov wrote that the React team doesn't think version 16 will cause trouble for most React apps:

React 16 (work in progress) is a rewrite, but it has the same public API. Out of more than 30,000 (!) components at Facebook, only a dozen or so needed changes, and those few components were relying on unsupported or undocumented behavior. So this is quite literally 99,9% compatibility. This makes us confident React 16 will most likely work with your code too.

Fiber is expected to make its debut in version 16 of React which will include not just the reconciliation engine, but new renderers (e.g. ReactDOM, React Native) to work in tandem. Until then, isfiberreadyyet.com provides up-to-date results of the test suite. As of this writing, 92.2% of tests were passing.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and dont miss out on content that matters to you

BT