React v16.0 Release Overview + Migration

Attention: The following article was published over 7 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

React v16.0 was released by Facebook on Tuesday, September 26th. This version introduces performance boosts and other very helpful features.

React 16 brings some significant internal changes features to the table. In my opinion, one of the most interesting thing about this release is that React has been rewritten. Luckily, in terms of upgrading, if your app runs in 15.6 without any warnings, it should work in 16 (with minor exceptions).

In this blog I highlight some of the new features introduced in React v16.0, in addition to demonstrating how to update your current React applications to v16.0 using a Keyhole open source application for reference.

New Features Introduced

The rewrite includes features such as new render return types with fragments and strings. It gives better error handling while unmounting the entire component from the root if an error is thrown inside a component’s render or lifecycle methods. This provides a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, and better server-side rendering.

The server-side rendering has been completely rewritten and it is wicked fast, while supporting streaming. According to core team member Sasha Aickin, server-side rendering in React 16 is roughly three times faster(!!!) than React 15.

These are just a few of the new features that I wanted to highlight; React 16 also includes custom DOM attributes, reduced file sizes, new core architecture – now built on top of a new core architecture named “Fiber.” Also, React 16 is MIT licensed.

Breaking Changes & Deprecations

Before I walk you through how to update your application, I want to inform you on some of the breaking changes and new deprecations. The only new deprecation listed on Facebook’s blog is hydrating a server-rendered container, which now has an explicit API. Going forward, use ReactDom.hydrate instead of ReactDOM.render if you are updating server-rendered HTML.

React 16, as it was rewritten, introduces a small number of breakings changes. While Facebook seems to be confident they will not break most apps, I will highlight a few of those breaking changes that seem to be important and may affect your application.

First, ReactDOM.render and ReactDOM.unstable_renderInfoContainer now return null when called from inside a lifecycle method. To work around this, you can use portals or refs.

There are also a few things changed when calling setState in React v16.0. When calling setState with null, it will no longer trigger an update automatically, which allows you to decide in an update function if you want to re-render. Also, calling setState directly in render will always causes an update, but Facebook states that “Regardless, you should not be calling setState from render.”

Finally, the last breaking change I will highlight: when replacing with , B.componentWillMount now always happens before A.componentWillUnmount. Previously, it would happen vice-versa in some cases.

Upgrading React Applications

Taking into consideration this new version, we have upgraded our now-playing React reference application from React “^15.5.4” to React “^16.0.0”. We also worked to upgrade the react-dom from “^15.5.4” to react-dom “^16.0.0”.

Luckily, upgrading to these versions was fairly simple as Facebook made sure not to break the public API as hundreds of companies use React in production every day.

Instructions

If you are looking to upgrade your React application from version x.x.x. to React v16.0, you can follow these easy steps.

React provides three ways of installation for the migration to v16.0, see below.

To install React 16 with Yarn, run:

yarn add react@^16.0.0 react-dom@^16.0.0

To install React 16 with npm, run:

npm install --save react@^16.0.0 react-dom@^16.0.0

For UMD builds of React via a CDN, use the following:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

You can find in-depth installation documentation here.

In our case, I used npm to install the new version of React.

To make sure it was updated, check your package.json file and find ‘react’ and ‘react-dom’ – as they should now read “react”: “^16.0.0” and “react-dom”: “^16.0.0”.

As I read through the breaking changes, I also went through every file making sure everything was still functioning well and compatible with the new version.

In the version release, React stated that there are new JavaScript environment requirements. React 16 now depends on the collection types Map and Set. To account for support of older browsers, you may want to create a global polyfill, such as core-js or babel-polyfill. For our case, we have utilized core-js as a polyfill to support older browsers(e.g. IE < 11). React also stated that they depend on requestAnimationFrame for test environments.

Final Thoughts

All you have to do now is run your application and everything should be working!

As we migrate over to React v16.0, we are excited about the progress React is making as the widely-used framework is updated. This framework provides a performant and powerful resource to build beautiful user interfaces.

In my opinion, React v16 is a firm step in the right direction and we look forward to utilizing the new features of this release as we continue to build high-quality, innovative products.