The first React 16 beta is now available for public testing. 🎉

Installation Instructions

The beta has been published to NPM with The tag “next”. Regular NPM will continue to use The mouse install the beta use:

yarn add react@next react-dom@next
Copy the code

Or:

npm install --save react@next react-dom@next
Copy the code

What Does React 16 Mean for You?

React 16 is the first release that ships with a rewrite of the React core (previously codenamed “Fiber”). This rewrite had a few goals:

  • Remove old internal blockactions that didn’t age well and crossinternal changes.
  • Let us ship some of the most requested features like returning arrays from render, recovering from component errors, and readable component stack traces for every error.
  • Enable us to start experimenting with asynchronous rendering of components for better perceived performance.

This initial React 16.0 release is mostly focused on compatibility with existing apps. It does not enable asynchronous We will introduce an opt-in to the async mode later during React 16.x. We don’t expect React 16.0 to make Your apps stepfaster or slower, but we’d love to know if you see improvements or regressions.

JavaScript Environment Requirements

React 16 depends on the collection types Map and Set. If you support older browsers and devices which may not yet provide these natively (eg <IE11), consider including a global polyfill in your bundled application, such as core-js or babel-polyfill.

A polyfilled environment for React 16 using core-js to support older browsers might look like:

import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('root') );

React also depends on requestAnimationFrame (even in test environments). A simple shim for testing environments would be:

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};
Copy the code

Points of Interest

  • This is a complete rewrite of React but we expect it to work with your existing code. If you fixed all deprecation warnings introduced in 15.x, the 16 beta should work for you.
  • Third party libraries that relied on deprecated or unsupported APIs may need updates to work correctly with this new release. Now is a good time to file issues against libraries that have problems. (And tell us if we broke something!)
  • We are particularly interested in hearing about performance differences you notice between 15.x and 16.x. We don’t expect any massive changes but would love to know about improvements or regressions. Please report them here!
  • The server renderer has been completely rewritten, and now offers a streaming mode (it’s currently exposed via react-dom/node-stream but this might change). Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. This server renderer code is still very new, so it is likely to have issues. Please report them.
  • React Native follows a different release cycle and will update to the beta in a future release. (It’s already using an alpha release but not yet using Fiber.)

Breaking Changes

Error Handling

  • Previously, runtime errors used to put React into a broken state and produce cryptic errors. React 16 fixes this by introducing a Error boundaries can catch runtime errors in a component tree. log them, and display a fallback UI instead.
  • If there is an uncaught error in a component, and there is no error boundary up in the tree, the whole component tree will be unmounted. This helps avoid very nasty bugs where the UI has been corrupted due to an error, but it means that you need to add a few error boundaries to your app to handle the errors gracefully.
  • React 15 had a very limited undocumented support for error boundaries with a different method name. It used to be called unstable_handleError, but has been renamed to componentDidCatch.

You can learn more about the new error handling behavior here.

Scheduling and Lifecycle

  • ReactDOM.render() and ReactDOM.unstable_renderIntoContainer() now return null if called from inside a lifecycle method.
    • To work around this, you can either use the new portal API or refs.
  • 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 callback (second argument) now fires immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.
  • When replacing <A /> with <B />.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 usingReactDOM.unmountComponentAtNode. See this example.
  • componentDidUpdate lifecycle no longer receives prevContext param. (See # 8631)

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 this 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 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:
    • 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.minThe.js –react-dom/umd/react-dom.production.min.js

Known Issues

  • The server renderer crashes in production with inline styles. (# 10299, fixed by # 10300)
    • Fixed in 16.0.0 - beta. 2
  • The server renderer doesn’t yet support returning arrays and strings from components.
    • Fixed by #10221, but not released yet.
  • The server renderer still renders data-reactid somewhat unnecessarily. (# 10306)
    • Fixed by #10339, but not released yet.
  • Shallow the renderer doesn ‘t passcontext to componentWillReceiveProps (to be fixed by # 10342)
  • Shallow renderer doesn’t implement unstable_batchedUpdates. (TBD)
  • There is an issue with 'use strict' in older browsers (#10294 (comment))
  • Some popular third party libraries won’t work yet (e.g. Enzyme).
  • There is a report that Google crawler can’t render the page using 16 (link).
  • In some cases Error: null is reported instead of the real error. (# 10321)
  • (Please report more issues in this thread.)

Updates

  • Published the initial beta to NPM on 2017-07-24.
  • Release 16.0.0 - beta. 2 to address a crash in server rendering.