React 16, an upgrade to Facebook’s popular JavaScript UI library that features a rewritten core to improve animation, layout, and gesture support, has just moved to a beta release stage.
Published as an NPM module, this initial beta release is focused mainly on compatibility with existing apps, and does not yet include asynchronous rendering capabilities. Facebook has pledged to offer native-like performance with version 16 of the open source library. Previously codenamed “Fiber,” the rewritten core is intended to offer a multitude of capabilities including:
- Experimentation with asynchronous rendering of components to improve performance.
- Returning of arrays from render as well as component error recovery and readable stack traces for errors.
- Removal of internal abstractions that did not “age well” and hindered internal changes.
Facebook will introduce an opt-in to the upgrade’s async mode later during the React 16.x development process. This initial React 16.0 release is not expected to make apps significantly faster or slower. Improving performance in React is an iterative process, the company said. With the beta release, The company wants to know if developers see improvements or regressions. “We are particularly interested in hearing about performance differences you notice between 15.x and 16.x.”
Version 16 relies on the Map and Set collection types. Older browsers and devices may not yet support these natively; developers should consider installing a global polyfill in their application, such as core-js or babel-polyfill. The server-renderer in React 16 has been rewritten and features a streaming mode.
Breaking changes in the beta include new error-handling features, with the introduction of “error boundaries” components that catch runtime errors in a component tree, log them, and display a fallback UI. Runtime errors previously put React into a broken state and produced cryptic alerts. Breaking changes in scheduling and lifecycle include the ReactDOM.render() and ReactDOM.unstable_renderSubtreeIntoContainer() methods, which now return “null” when called from lifecycle methods. For packaging, there is no react/lib/* or react-dom/lib/* anymore. When it comes to add-ons, the react-addons-perf performance tool does not work in React 16. Similar functionality may or may not be provided in the upgrade.