For different reasons, you or your team may want to know how to downgrade React version 16 to 15. You should pick up the right methods in this article, which also explains why such a downgrade can be a better idea.

When You Should Make A Downgrade

While you have every reason in the world to use a more recent React version, some scenarios require you to use version 15 instead.

Many developers set out to write their projects when React 15 was the latest upgrade. But by the time it completes, a new major release (16) has been introduced. While moving to this new version is generally recommended, making such substantial changes to an existing project isn’t always feasible.

Such effort requires extra resources for rewriting and reviewing. If your project is closing to the deadline, you have to work within severe time constraints, while the benefits aren’t always clear.

Yes, React 16 comes with many new features and optimization. But this major release also brings several breaking changes. Most of the time, React 16 has excellent backward compatibility. In some rare cases, it can break some apps too.

For starters, React 16 doesn’t work great with older browsers and platforms that don’t support the Set and Map collection types. There is a workaround that involves a polyfilled environment with core-js:

import 'core-js/es6/map';

import 'core-js/es6/set';

import React from 'react';

import ReactDOM from 'react-dom';

This isn’t optimal, however, and you may want to revert to React 15 for better support.

React 16 is now compiled into single files, meaning the lib folder no longer exists. Some undocumented internals might not work anymore as a result. Similarly, as React ceases support for addons, they are now moving to npm.

Many deprecations have been removed from React’s core package as well, including the shallow renderer, React.DOM, React.PropTypes, and React.createClass.

If your app falls into one of those situations, it might be a good idea for you to stay in React 15, at least for the time being.

How To Downgrade React Version 16 To 15

npm

The process is similar to when you need to downgrade from version 18 to 17, for instance. If you have installed React 16 in the environment of your application, this has been added to the package.json file. You will need to manually edit it and revert the versions of the react and react-dom packages.

  "dependencies": {

    "react": "^15.6.2",

    "react-dom": "^15.6.2",

  },

Note: 15.6.2 is the latest minor version of React 15.

Now run npm install, which should check for the package.json file and install the right version of react and react-dom:

$ npm install

In addition to working with certain applications, you can also install React 15 modules for the whole system. The npm package manager allows you to install a specific version of any module, including react and react-dom:

$ npm install -g [email protected] [email protected]

Wait for the installation process to complete. You should now have both react and react-dom version 15.6.2 on your system. Confirm this with npm list:

$ npm list react

├─┬ re[email protected]

│ └── [email protected] deduped

└── [email protected]

yarn

Yarn is a great alternative to npm, and it is also possible to install a specific package version with this package manager.

$ yarn add [email protected] [email protected]

Check for React version with yarn:

$ yarn list --pattern react

├─ [email protected]

└─ [email protected]

Conclusion

It is quite easy to learn how to downgrade React version 16 to 15. This temporary reversion can help avoid breaking your current applications before you move to the more recent versions in the future.