What’s New in React 16 and Fiber Explanation
An overview of the features and updates for the highly anticipated release for React.
--
The update to the React core algorithm has been years in the making — it offers a ground-up rewrite for how React manages reconciliation. React will maintain the same public API and should allow for immediate upgrade for most projects (assuming you’ve fixed the deprecation warnings). The main goals of the release are the following:
- 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(). - Portals
- Better support for error boundaries.
Features
Core Algorithm Rewrite
The primary feature of the rewrite is async rendering. (Note: this is not available in the 16.o release but will be an opt-in feature in a future 16.x release). In addition, it removes old internal abstractions that didn’t age well and hindered internal changes.
Much of this was derived from Lin Clark’s presentation, so please check that out and show her some love for such an incredible overview.
What async rendering means is that the rendering work can be split into chunks and spread out over multiple frames. The rendering engine for the browser is single threaded, which means nearly all actions happen synchronously. React 16 manages the main thread and rendering using native browser APIs by intermittently checking to see if there is other work that needs to be performed. An example of the main thread of the browser in Firefox is simply:
while (!mExiting) {
NS_ProcessNextEvent(thread);
}
