It’s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React’s internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.
\nTo that end, today we’re releasing React 15.5.0.
\nThe biggest change is that we’ve extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.
These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats console.error as a failure.
Adding new warnings is not something we do lightly. Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.
\nSo while the warnings may cause frustration in the short-term, we believe prodding developers to migrate their codebases now prevents greater frustration in the future. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.
\nFor each of these new deprecations, we’ve provided a codemod to automatically migrate your code. They are available as part of the react-codemod project.
\nProp types are a feature for runtime validation of props during development. We’ve extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.
\nIn 15.5, instead of accessing PropTypes from the main React object, install the prop-types package and import them from there:
// Before (15.4 and below)\nimport React from 'react';\n\nclass Component extends React.Component {\n render() {\n return <div>{this.props.text}</div>;\n }\n}\n\nComponent.propTypes = {\n text: React.PropTypes.string.isRequired,}\n\n// After (15.5)\nimport React from 'react';\nimport PropTypes from 'prop-types';\nclass Component extends React.Component {\n render() {\n return <div>{this.props.text}</div>;\n }\n}\n\nComponent.propTypes = {\n text: PropTypes.string.isRequired,};The codemod for this change performs this conversion automatically. Basic usage:
\njscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>The propTypes, contextTypes, and childContextTypes APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.
You may also consider using Flow to statically type check your JavaScript code, including React components.
\nWhen React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: React.createClass.
Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. Along with function components, JavaScript classes are now the preferred way to create components in React.
\nFor your existing createClass components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, create-react-class is available on npm as a drop-in replacement:
// Before (15.4 and below)\nvar React = require('react');\n\nvar Component = React.createClass({ mixins: [MixinA],\n render() {\n return <Child />;\n }\n});\n\n// After (15.5)\nvar React = require('react');\nvar createReactClass = require('create-react-class');\nvar Component = createReactClass({ mixins: [MixinA],\n render() {\n return <Child />;\n }\n});Your components will continue to work the same as they did before.
\nThe codemod for this change attempts to convert a createClass component to a JavaScript class, with a fallback to create-react-class if necessary. It has converted thousands of components internally at Facebook.
Basic usage:
\njscodeshift -t react-codemod/transforms/class.js path/to/componentsWe’re discontinuing active maintenance of React Addons packages. In truth, most of these packages haven’t been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.
\nvalue and onChange handler instead.React.PureComponent instead.React.PureComponent instead.value and onChange handler instead.We’re also discontinuing support for the react-with-addons UMD build. It will be removed in React 16.
Currently, the React Test Utils live inside react-addons-test-utils. As of 15.5, we’re deprecating that package and moving them to react-dom/test-utils instead:
// Before (15.4 and below)\nimport TestUtils from 'react-addons-test-utils';\n\n// After (15.5)\nimport TestUtils from 'react-dom/test-utils';This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.
\nThe exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to react-test-renderer/shallow.
// Before (15.4 and below)\nimport { createRenderer } from 'react-addons-test-utils';\n// After (15.5)\nimport { createRenderer } from 'react-test-renderer/shallow';A special thank you to these folks for transferring ownership of npm package names:
\n\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.5.0 react-dom@^15.5.0To install React with npm, run:
\nnpm install --save react@^15.5.0 react-dom@^15.5.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.5.0 of the react, react-dom, and addons packages on npm and the react package on bower.
React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)ReactDOM together with ReactDOMServer. (@wacii in #9005)react-dom/test-utils, which exports the React Test Utils. (@bvaughn)componentWillUnmount was not called for children. (@gre in #8512)react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)React.createClass and React.PropTypes (@acdlite in 12a96b9)react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)