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.
