Skip to content

Upgrading react 15 to 16

Breaking15.7.0 → 16.14.0Breaking35Security1Platform1Deprecated7New77Changed80Fixed155Other7

BreakingUpgrade verdict

35 breaking changes and a platform requirement change and a security fix.

  • The callback parameters of ReactDOM.createRoot() are removed, and using them now triggers warnings.
  • The old experimental concurrent mode entry point is gone; use the new root creation API instead.
  • The experimental async mode export has a new name.
  • The experimental placeholder component and its delay prop have new names.
Top 5 of 44 that need code or config changes

Drops create-react-class, fbjs.

Installs 5 packages in all (was 19).

Breaking35
Removes ReactDOM.createRoot() callback params and adds warnings on usage.
ReactDOM.createRoot()
Removes unstable_ConcurrentMode in favor of unstable_createRoot.
unstable_ConcurrentModeunstable_createRoot
Renames unstable_AsyncMode to unstable_ConcurrentMode.
unstable_AsyncModeunstable_ConcurrentMode
Renames unstable_Placeholder to Suspense and delayMs to maxDuration.
unstable_PlaceholderSuspensedelayMsmaxDuration
Renames the Scheduler package to scheduler.
scheduler
Removes unstable_deferredUpdates in favor of unstable_scheduleWork from schedule.
unstable_deferredUpdatesunstable_scheduleWorkschedule
Removes useSyncScheduling from the React Reconciler host config.
useSyncScheduling
Calling setState with null no longer triggers an update.
setState
componentDidUpdate no longer receives the prevContext parameter.
componentDidUpdateprevContext
Shallow renderer no longer calls componentDidUpdate() because DOM refs are not available.
componentDidUpdate()componentDidMount()
Shallow renderer no longer implements unstable_batchedUpdates().
unstable_batchedUpdates()
Errors in render and lifecycle methods now unmount the component tree by default.
Removes the react-with-addons.js build; compatible addons are published separately on npm.
react-with-addons.js
Removes the experimental unstable_createRoot and unstable_createSyncRoot APIs from React DOM.
unstable_createRootunstable_createSyncRootcreateRootcreateSyncRoot
Requires effect clean-up functions to return either undefined or a function; all other values, including null, are not allowed.
Scheduler switches from the deadline object to the shouldYield API.
shouldYield
Renames the experimental "tracking" API to "tracing".
trackingtracing
Deletes the experimental React Call Return feature because it affected bundle size and the API wasn't good enough.
Replaces React.unstable_AsyncComponent with React.unstable_AsyncMode.
React.unstable_AsyncComponentReact.unstable_AsyncMode
Changes the hydration API for better Flow typing.
ReactDOM.render() and ReactDOM.unstable_renderIntoContainer() now return null when called inside a lifecycle method.
ReactDOM.render()ReactDOM.unstable_renderIntoContainer()
Calling setState directly in render now always causes an update.
setStaterender
The setState callback now fires immediately after componentDidMount or componentDidUpdate instead of after all components have rendered.
setStatecomponentDidMountcomponentDidUpdate
When replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount.
componentWillMountcomponentWillUnmount
Changing a component's ref now detaches later, when applying DOM changes, instead of before render.
ref
Re-rendering into a container modified by something other than React now emits a warning.
ReactDOM.unmountComponentAtNode
Non-unique keys may now cause children to be duplicated and/or omitted instead of raising a hard error.
key
ReactDOM.unstable_batchedUpdates now only takes one extra argument after the callback.
ReactDOM.unstable_batchedUpdates
Single-file browser build names and paths changed to distinguish development and production builds.
react/dist/react.jsreact/umd/react.development.jsreact/dist/react.min.jsreact/umd/react.production.min.jsreact-dom/dist/react-dom.jsreact-dom/umd/react-dom.development.jsreact-dom/dist/react-dom.min.jsreact-dom/umd/react-dom.production.min.js
The server renderer is rewritten: no markup validation, no comments for empty components, and no data-reactid attributes.
data-reactid
Hydrating server rendered HTML now requires ReactDOM.hydrate instead of ReactDOM.render.
ReactDOM.hydrateReactDOM.render
Unknown props passed to DOM components are now rendered in the DOM for valid values.
Removes 15.x deprecations from core: React.createClass, React.PropTypes, React.DOM, react-addons-test-utils and shallow renderer.
React.createClassReact.PropTypesReact.DOMreact-addons-test-utilsreact-dom/test-utilsreact-test-renderer/shallowcreate-react-classprop-types
Changes internal event names, which can break third-party packages relying on React internals in unsupported ways.
Changes the experimental React Reconciler host config shape to be flat without nested objects.
Security1
Fixes a potential XSS vulnerability when an attacker controls an attribute name in React DOM Server.
react-dom
Platform1
Adds a peer dependency on React 16.3+ to Create Subscription.
Deprecated7
Deprecates React.createFactory().
React.createFactory()
Deprecates unstable_createPortal.
unstable_createPortal
Deprecates old names for the UNSAFE_* lifecycle methods.
UNSAFE_*
Deprecates javascript: URLs as a common attack surface.
Deprecates uncommon module pattern (factory) components.
Deprecates the Jest-specific ReactTestUtils.mockComponent() helper.
ReactTestUtils.mockComponent()
Deprecates ReactDOM.unstable_createPortal() in favor of ReactDOM.createPortal().
ReactDOM.unstable_createPortal()ReactDOM.createPortal()