--- title: "React v16.0" author: [acdlite] --- We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including [**fragments**](#new-render-return-types-fragments-and-strings), [**error boundaries**](#better-error-handling), [**portals**](#portals), support for [**custom DOM attributes**](#support-for-custom-dom-attributes), improved [**server-side rendering**](#better-server-side-rendering), and [**reduced file size**](#reduced-file-size). ### New render return types: fragments and strings {#new-render-return-types-fragments-and-strings} You can now return an array of elements from a component's `render` method. Like with other arrays, you'll need to add a key to each element to avoid the key warning: ```js render() { // No need to wrap list items in an extra element! return [ // Don't forget the keys :)
*Tip: Pay attention to the spinning black square.* We think async rendering is a big deal, and represents the future of React. To make migration to v16.0 as smooth as possible, we're not enabling any async features yet, but we're excited to start rolling them out in the coming months. Stay tuned! ## Installation {#installation} React v16.0.0 is available on the npm registry. To install React 16 with Yarn, run: ```bash yarn add react@^16.0.0 react-dom@^16.0.0 ``` To install React 16 with npm, run: ```bash npm install --save react@^16.0.0 react-dom@^16.0.0 ``` We also provide UMD builds of React via a CDN: ```html ``` Refer to the documentation for [detailed installation instructions](/docs/installation.html). ## Upgrading {#upgrading} Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.** For deprecations listed in [packaging](#packaging) below, codemods are provided to automatically transform your deprecated code. See the [15.5.0](/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project. ### New deprecations {#new-deprecations} Hydrating a server-rendered container now has an explicit API. If you're reviving server-rendered HTML, use [`ReactDOM.hydrate`](/docs/react-dom.html#hydrate) instead of `ReactDOM.render`. Keep using `ReactDOM.render` if you're just doing client-side rendering. ### React Addons {#react-addons} As previously announced, we've [discontinued support for React Addons](/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the foreseeable future, but we won't publish additional updates. Refer to the previous announcement for [suggestions on how to migrate](/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). `react-addons-perf` no longer works at all in React 16. It's likely that we'll release a new version of this tool in the future. In the meantime, you can [use your browser's performance tools to profile React components](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab). ### Breaking changes {#breaking-changes} React 16 includes a number of small breaking changes. These only affect uncommon use cases and we don't expect them to break most apps. * React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries). * `ReactDOM.render` and `ReactDOM.unstable_renderSubtreeIntoContainer` now return null if called from inside a lifecycle method. To work around this, you can use [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635). * `setState`: * Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render. * Calling `setState` directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render. * `setState` callbacks (second argument) now fire immediately after `componentDidMount` / `componentDidUpdate` instead of after all components have rendered. * When replacing `` with ``, `B.componentWillMount` now always happens before `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases. * Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM. * It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987) * `componentDidUpdate` lifecycle no longer receives `prevContext` param. (See [#8631](https://github.com/facebook/react/issues/8631)) * Shallow renderer no longer calls `componentDidUpdate` because DOM refs are not available. This also makes it consistent with `componentDidMount` (which does not get called in previous versions either). * Shallow renderer does not implement `unstable_batchedUpdates` anymore. * `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback. ### Packaging {#packaging} * There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you. * There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them. * The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods. * The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example: * `react/dist/react.js` → `react/umd/react.development.js` * `react/dist/react.min.js` → `react/umd/react.production.min.js` * `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js` * `react-dom/dist/react-dom.min`.js → `react-dom/umd/react-dom.production.min.js` ## JavaScript Environment Requirements {#javascript-environment-requirements} React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/). A polyfilled environment for React 16 using core-js to support older browsers might look like: ```js import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(Ever wonder what "async rendering" means? Here's a demo of how to coordinate an async React tree with non-React work https://t.co/3snoahB3uV pic.twitter.com/egQ988gBjR
— Andrew Clark (@acdlite) September 18, 2017