What’s New in React 16 and Fiber Explanation

Finally! React 16 is here! This is what you've been waiting for  #reactjs #javascript

  • While React is known to be very fast, blocking the main thread could still cause some applications to not feel fluid.
  • React computes part of the tree and then will pause rendering to check if the main thread has any paints or updates that need to be performed.
  • This process is accomplished by introducing a new data structure called a “fiber” that maps to a React instance and manages the work for the instance as well as know its relationship to other fibers.
  • Stack reconciliation — updates must be completed entirely before returning to main thread (credit Lin Clark) – – – – Fiber reconciliation — updates will be batched in chunks and React will manage the main thread (credit Lin Clark) – – React 16 will also prioritize updates by importance.
  • After being added to your app, error boundaries catch errors and gracefully display a fallback UI without the entire component tree crashing.

An overview of the features and updates for the highly anticipated release for React.
The update to the React core…

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:

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.

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:

Previously, React would block the entire thread as it calculated the tree. This process for reconciliation is now named “stack reconciliation”. While React is known to be very fast, blocking the main thread could still cause some applications to not feel fluid. Version 16 aims to fix this problem by not requiring the render process to complete once it’s initiated….

What’s New in React 16 and Fiber Explanation