![\"React](\"/static/64d522b74fb585f1abada9801f85fa9d/1ac66/react-perf-chrome-timeline.png\")
\n \n \n \n Today we are releasing React 15.4.0.
\nWe 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.
\nMore than a year ago, we started separating React and React DOM into separate packages. We deprecated React.render() in favor of ReactDOM.render() in React 0.14, and removed DOM-specific APIs from React 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 React.Component and React.createElement().
This solves a few long-standing issues, such as errors when you import React DOM in the same file as the snapshot testing renderer.
\nIf you only use the official and documented React APIs you won’t need to change anything in your application.
\nHowever, 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.
\nYou 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.
\n\n \n \n \n \n\n \n \n \n \n \nTo use it:
\n?react_perf in the query string (for example, http://localhost:3000/?react_perf).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.
\nCurrently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard User Timing API so we expect more browsers to add support for it.
\nIf 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 componentDidMount:
import React from 'react';\n\nexport default class MyInput extends React.Component {\n componentDidMount() {\n this.input.focus(); }\n\n render() {\n return (\n <input\n ref={node => this.input = node} />\n );\n }\n}With snapshot renderer, this.input will be null because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom createNodeMock function to the snapshot renderer in an options argument:
import React from 'react';\nimport MyInput from './MyInput';\nimport renderer from 'react-test-renderer';\n\nfunction createNodeMock(element) { if (element.type === 'input') { return { focus() {}, }; } return null;}\nit('renders correctly', () => {\n const options = {createNodeMock};\n const tree = renderer.create(<MyInput />, options); expect(tree).toMatchSnapshot();\n});We would like to thank Brandon Dail for implementing this feature.
\nYou can learn more about snapshot testing in this Jest blog post.
\nWe recommend using Yarn or npm for managing front-end dependencies. If you’re new to package managers, the Yarn documentation is a good place to get started.
\nTo install React with Yarn, run:
\nyarn add react@15.4.0 react-dom@15.4.0To install React with npm, run:
\nnpm install --save react@15.4.0 react-dom@15.4.0We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.
\nRemember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to compile it in production mode.
\nIn case you don’t use a bundler, we also provide pre-built bundles in the npm packages which you can include as script tags on your page:
\nWe’ve also published version 15.4.0 of the react, react-dom, and addons packages on npm and the react package on bower.
aria- attributes.autofocus rather than autoFocus.String.prototype.split.batchedUpdates API now passes the wrapped function’s return value through.Simulate.click() on a <input disabled onClick={foo} /> then foo will get called whereas it didn’t before.ReactTestRenderer.create() now accepts {createNodeMock: element => mock} as an optional argument so you can mock refs with snapshot testing.