With React 16, we saw the release of React Fiber–a long-awaited update to React itself. With React 16 which is built on top of a new core architecture, codenamed “Fiber”, a bunch of new features have been released to enhance the experience for React developers.

React v16.0 comes with some major changes and an update to the react core algorithm. With React v16.0 Facebook has completely revised the internals of React while keeping the public API essentially the same.

Perhaps one of the most exciting area the React team is working on is “async rendering”–a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. In order to rethink your existing application in React 16, we need to first understand the changes which have been incorporated into this new release and then we can approach the problems of React 15 and how this release solves them.

React Fiber is a complete rewrite of the React’s reconciliation algorithm. With React Fiber, the new reconciler will have the ability to do the following:

Split interruptible work into chunks.

Pause work and come back to it later.

Reuse previously completed work.

Abort work. To learn more about how this new reconciliation algorithm and the fiber architecture, I would highly recommend reading React Fiber Architecture and watching “A Cartoon Intro to Fiber” by Lin Clark both of which are excellent resources to understand the algorithm.

But as Dan Abramov quoted in one of his tweets where he mentions that React 16 enables asynchronous rendering is a myth and the reality is that the React team is still working on that, and it will be opt in when it’s ready.

For now React 16 runs in compatibility mode that for the most part is equivalent to how React 15 scheduled rendering.

Rewriting with React 16

So far, we’ve been working on understanding the algorithm rewrite and the new architecture, going ahead we’ll discuss the various issues which developers were faced with while using React 15, and how React 16.2 solves them. The following new features were introduced in the latest React release:

Improved Support for fragments

With fragments we can returning multiple children from a component’s render method.Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM: Problems with Earlier React versions:

Problem No 1:

Adjacent JSX Tags should be wrapped with another parent element.