What’s new in React 16

A quick, small introduction to React 16.0.

Finally Facebook has announced React 16.0.

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.

A brief introduction of the changes are:

New Core Architecture:

React 16 is the first version of React built on top of a new core architecture, which is named “Fiber”. The new features in React v16.0 i.e. error boundaries, fragments, portals and async rendering (which is to be released soon) have been made possible due to Fiber.
If you want to read more about this new architecture, here’s the link.

Fragments & Strings:

With this new feature in React v16.0 now we can also return an array of elements, and string from component’s render method.

Below are the examples for array and string respectively.

Returning an array of elements.

Returning string.

Error Handling:

Prior to React v16.0, any error in any part of the UI would crash the whole application. To tackle this problem, a new concept has been introduced in React v16.0 namely Error Boundary.

Only class components can be error boundaries. To make class component an error boundary we define a new lifecycle method called componentDidCatch(error, info).

Error Boundary Component

Now you can use this Error Boundary as a regular component.

If you’re interested in a screencast, I got you.

Portals:

With this new concept of portals React v16.0 allows us to renders children in any DOM node regardless of it’s location in the DOM.

Click here to know more about portals.

Server Side Rendering:

React v16.0 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so you can start sending bytes to the client faster. I don’t know much about server side rendering but I can refer you to this amazing article for an in-depth introduction to server side rendering in React v16.0.
Here’s the Link.

Reduced File Size:

Despite all these additions, React v16.0 is actually smaller compared to 15.6.1!

• react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
• react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
• react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).

MIT Licensed:

React v16.0 is available under the MIT license. They’ve also published React 15.6.2 under MIT.