We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.
\nYou 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:
render() {\n // No need to wrap list items in an extra element!\n return [\n // Don't forget the keys :)\n <li key=\"A\">First item</li>,\n <li key=\"B\">Second item</li>,\n <li key=\"C\">Third item</li>,\n ];\n}Starting with React 16.2.0, we are adding support for a special fragment syntax to JSX that doesn’t require keys.
\nWe’ve added support for returning strings, too:
\nrender() {\n return 'Look ma, no spans!';\n}See the full list of supported return types.
\nPreviously, runtime errors during rendering could put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component’s render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it’s probably not the ideal user experience.
\nInstead of unmounting the whole app every time there’s an error, you can use error boundaries. Error boundaries are special components that capture errors inside their subtree and display a fallback UI in its place. Think of error boundaries like try-catch statements, but for React components.
\nFor more details, check out our previous post on error handling in React 16.
\nPortals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
\nrender() {\n // React does *not* create a new div. It renders the children into `domNode`.\n // `domNode` is any valid DOM node, regardless of its location in the DOM.\n return ReactDOM.createPortal(\n this.props.children,\n domNode,\n );\n}See a full example in the documentation for portals.
\nReact 16 includes a completely rewritten server renderer. It’s really fast. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
Core team member Sasha Aickin wrote a great article describing React 16’s SSR improvements. According to Sasha’s synthetic benchmarks, server rendering in React 16 is roughly three times faster than React 15. “When comparing against React 15 with process.env compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!” (As Sasha points out, please be aware that these numbers are based on synthetic benchmarks and may not reflect real-world performance.)
In addition, React 16 is better at hydrating server-rendered HTML once it reaches the client. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums! In general, we don’t recommend that you render different content on the client versus the server, but it can be useful in some cases (e.g. timestamps). However, it’s dangerous to have missing nodes on the server render as this might cause sibling nodes to be created with incorrect attributes.
\nSee the documentation for ReactDOMServer for more details.
Instead of ignoring unrecognized HTML and SVG attributes, React will now pass them through to the DOM. This has the added benefit of allowing us to get rid of most of React’s attribute whitelist, resulting in reduced file sizes.
\nDespite all these additions, React 16 is actually smaller compared to 15.6.1!
\nreact 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).
\nThe size difference is partly attributable to a change in packaging. React now uses Rollup to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React’s impact on bundle size is roughly consistent regardless of how you ship your app, whether it’s with Webpack, Browserify, the pre-built UMD bundles, or any other system.
\nIn case you missed it, React 16 is available under the MIT license. We’ve also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.
\nReact 16 is the first version of React built on top of a new core architecture, codenamed “Fiber.” You can read all about this project over on Facebook’s engineering blog. (Spoiler: we rewrote React!)
\nFiber is responsible for most of the new features in React 16, like error boundaries and fragments. Over the next few releases, you can expect more new features as we begin to unlock the full potential of React.
\nPerhaps the most exciting area we’re working on is async rendering—a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. The upshot is that, with async rendering, apps are more responsive because React avoids blocking the main thread.
\nThis demo provides an early peek at the types of problems async rendering can solve:
\n\nEver 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
Tip: Pay attention to the spinning black square.
\nWe 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!
\nReact v16.0.0 is available on the npm registry.
\nTo install React 16 with Yarn, run:
\nyarn add react@^16.0.0 react-dom@^16.0.0To install React 16 with npm, run:
\nnpm install --save react@^16.0.0 react-dom@^16.0.0We also provide UMD builds of React via a CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Refer to the documentation for detailed installation instructions.
\nAlthough 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.
\nFor deprecations listed in packaging below, codemods are provided to automatically transform your deprecated code.\nSee the 15.5.0 blog post for more information, or browse the codemods in the react-codemod project.
\nHydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.
As previously announced, we’ve discontinued 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.
\nreact-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.
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.
\nunstable_handleError. This method has been renamed to componentDidCatch. You can use a codemod to automatically migrate to the new API.ReactDOM.render and ReactDOM.unstable_renderSubtreeIntoContainer now return null if called from inside a lifecycle method. To work around this, you can use portals or refs.setState:
setState with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.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.<A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount. Previously, A.componentWillUnmount could fire first in some cases.ReactDOM.unmountComponentAtNode. See this example.componentDidUpdate lifecycle no longer receives prevContext param. (See #8631)componentDidUpdate because DOM refs are not available. This also makes it consistent with componentDidMount (which does not get called in previous versions either).unstable_batchedUpdates anymore.ReactDOM.unstable_batchedUpdates now only takes one extra argument after the callback.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.react-with-addons.js build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.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 and 15.6.0 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:
\nreact/dist/react.js → react/umd/react.development.jsreact/dist/react.min.js → react/umd/react.production.min.jsreact-dom/dist/react-dom.js → react-dom/umd/react-dom.development.jsreact-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.jsReact 16 depends on the collection types Map and 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 or babel-polyfill.
\nA polyfilled environment for React 16 using core-js to support older browsers might look like:
\nimport 'core-js/es6/map';\nimport 'core-js/es6/set';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n <h1>Hello, world!</h1>,\n document.getElementById('root')\n);React also depends on requestAnimationFrame (even in test environments).
\nYou can use the raf package to shim requestAnimationFrame:
import 'raf/polyfill';As always, this release would not have been possible without our open source contributors. Thanks to everyone who filed bugs, opened PRs, responded to issues, wrote documentation, and more!
\nSpecial thanks to our core contributors, especially for their heroic efforts over the past few weeks during the prerelease cycle: Brandon Dail, Jason Quense, Nathan Hunzaker, and Sasha Aickin.
","excerpt":"We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size. New render return types: fragments and strings You can now return an array of elements from a component’s method. Like with other arrays, you’ll need to add a key to each element to avoid the key warning: Starting with React 16.2.0, we are adding…","frontmatter":{"title":"React v16.0","next":null,"prev":null,"author":[{"frontmatter":{"name":"Andrew Clark","url":"https://twitter.com/acdlite"}}]},"fields":{"date":"September 26, 2017","path":"content/blog/2017-09-26-react-v16.0.md","slug":"/blog/2017/09/26/react-v16.0.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2017/09/26/react-v16.0.html"}},"staticQueryHashes":[]}