Upgrading react 15 to 16
Breaking15.7.0 → 16.14.0Breaking35Security1Platform1Deprecated7New77Changed80Fixed155Other7
SecurityFixes a potential XSS vulnerability when an attacker controls an attribute name in React DOM Server.CVE-2018-6341 ↗
BreakingUpgrade verdict
35 breaking changes and a platform requirement change and a security fix.
In plain terms
- 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.
Must act Top 5 of 44 that need code or config changes
Drops create-react-class, fbjs.
Installs 5 packages in all (was 19).
What you must change
Breaking35
Removes ReactDOM.createRoot() callback params and adds warnings on usage.
ReactDOM.createRoot()Removes unstable_ConcurrentMode in favor of unstable_createRoot.
unstable_ConcurrentModeunstable_createRootRenames unstable_AsyncMode to unstable_ConcurrentMode.
unstable_AsyncModeunstable_ConcurrentModeRenames unstable_Placeholder to Suspense and delayMs to maxDuration.
unstable_PlaceholderSuspensedelayMsmaxDurationRenames the Scheduler package to scheduler.
schedulerRemoves unstable_deferredUpdates in favor of unstable_scheduleWork from schedule.
unstable_deferredUpdatesunstable_scheduleWorkscheduleRemoves
useSyncScheduling from the React Reconciler host config.useSyncSchedulingCalling setState with null no longer triggers an update.
setStatecomponentDidUpdate no longer receives the prevContext parameter.
componentDidUpdateprevContextShallow 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.jsRemoves the experimental
unstable_createRoot and unstable_createSyncRoot APIs from React DOM.unstable_createRootunstable_createSyncRootcreateRootcreateSyncRootRequires 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.
shouldYieldRenames the experimental "tracking" API to "tracing".
trackingtracingDeletes 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_AsyncModeChanges 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.
setStaterenderThe setState callback now fires immediately after componentDidMount or componentDidUpdate instead of after all components have rendered.
setStatecomponentDidMountcomponentDidUpdateWhen replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount.
componentWillMountcomponentWillUnmountChanging a component's ref now detaches later, when applying DOM changes, instead of before render.
refRe-rendering into a container modified by something other than React now emits a warning.
ReactDOM.unmountComponentAtNodeNon-unique keys may now cause children to be duplicated and/or omitted instead of raising a hard error.
keyReactDOM.unstable_batchedUpdates now only takes one extra argument after the callback.
ReactDOM.unstable_batchedUpdatesSingle-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.jsThe server renderer is rewritten: no markup validation, no comments for empty components, and no data-reactid attributes.
data-reactidHydrating server rendered HTML now requires ReactDOM.hydrate instead of ReactDOM.render.
ReactDOM.hydrateReactDOM.renderUnknown 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-typesChanges 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-domPlatform1
Adds a peer dependency on React 16.3+ to Create Subscription.
Deprecations to plan for
Deprecated7
Deprecates React.createFactory().
React.createFactory()Deprecates unstable_createPortal.
unstable_createPortalDeprecates 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()