React v15.4.0

React v15.4.0 - #reactjs Blog

  • React DOM Server (include React in the page before React DOM Server) Dev build with warnings: react-dom-server.js Minified build for production: react-dom-server.min.js
  • In React 15.4.0, we are finally moving React DOM implementation to the React DOM package.
  • import React from ‘react’ ; export default class MyInput extends React .
  • Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler.
  • Blog GitHub React Native Acknowledgements

We didn’t announce the previous minor releases on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.

@survivejs: React v15.4.0 – #reactjs Blog

Today we are releasing React 15.4.0.

We didn’t announce the previous minor releases on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.

More than a year ago, we started separating React and React DOM into separate packages. We deprecated

in favor of

in React 0.14, and removed DOM-specific APIs from

completely in React 15. However, the React DOM implementation still secretly lived inside the React package.

In React 15.4.0, we are finally moving React DOM implementation to the React DOM package. The React package will now contain only the renderer-agnostic code such as

and

This solves a few long-standing issues, such as errors when you import React DOM in the same file as the snapshot testing renderer.

If you only use the official and documented React APIs you won’t need to change anything in your application.

However, there is a possibility that you imported private APIs from

react/lib/*

, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.

Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don’t recommend using React DOM Server on the client in most cases.

You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other.

To use it:

Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.

Currently Chrome is the only browser supporting this feature, but we use the standard User Timing API so we expect more browsers to add support for it.

If you’re using Jest snapshot testing, you might have had issues with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in

import React from ‘react’ ; export default class MyInput extends React . Component { componentDidMount () { this . input . focus (); } render () { return ( < input ref = { node => this . input = node } /> ); } }

With snapshot renderer,

will be

null

because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom

function to the snapshot renderer in an

options

argument:

import React from ‘react’ ; import MyInput from ‘./MyInput’ ; import renderer from ‘react-test-renderer’ ; function createNodeMock ( element ) { if ( element . type === ‘input’ ) { return { focus () {}, }; } return null ; } it ( ‘renders correctly’ , () => { const options = { createNodeMock }; const tree = renderer . create ( < MyInput /> , options ); expect ( tree ). toMatchSnapshot (); });

We would like to thank Brandon Dail for implementing this feature.

You can learn more about snapshot testing in this Jest blog post.

npm

and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:

Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the

NODE_ENV

to use the production build of React which does not include the development warnings and runs significantly faster.

If you can’t use

npm

yet, we provide pre-built browser builds for your convenience, which are also available in the

react

package on bower.

We’ve also published version

of the

react

, and addons packages on npm and the

react

package on bower.

React v15.4.0