Introduced in March 2022, React 18 is a major release after two years. But big version jumps also mean breaking changes and errors. Check out how to downgrade React version 18 to 17 in case you need to go back to the previous installation.

When You Should Make A Downgrade

Using the latest version of React is the ideal every developer should strive for, especially when starting a new project. However, this isn’t the case for many situations.

A huge release like React 18 comes with many new features, improvements, and some deprecations. Some of them should work fine with your existing code. But a few changes may break your code or generate new bugs.

For starters, Internet Explorer is no longer supported by React from version 18. While this iconic browser from Microsoft isn’t as popular as it used to be, this drop can still deal a serious blow to projects that need to support legacy systems. The code for Internet Explorer hasn’t been removed yet. But if you upgrade to React 18, your applications may stop working at any time.

Another notable API whose support has ceased is ReactDOM.render. There is a new API (createRoot) in React 18 for managing roots, which also makes use of the brand new concurrent renderer introduced in the same version.

If you continue to use ReactDOM.render, your application will run in the React 17 mode. In this case, you may as well make a downgrade and come back to the older version.

The Strict Mode has become stricter as well. The development mode now has new checks that may stop your app from working.

There is a workaround, but it is complicated. It requires you to remove the Strict Mode before upgrading, resolve the issues it points out, and add this mode back. Sticking with React 17’s previous Strict Mode can be a good idea for an existing application for this exact reason.

On top of that, many APIs have been deprecated. Like ReactDOM.render, the usage of ReactDOM.hydrate in React 18 would result in a lot of warnings and your application running in the 17 version mode. Other APIs suffering from the same fate include:

• ReactDOMServer.renderToNodeStream
• ReactDOM.renderSubtreeIntoContainer
• ReactDOM.unmountComponentAtNode

How To Downgrade React Version 18 To 17

npm

If you have installed React 18 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": "^17.0.2",
    "react-dom": "^17.0.2",
  },

Note: 17.0.2 is the latest minor version of React 17.

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

$ npm install

Note: follow this guide if you see the “npm: command not found” message.

In addition to working with certain applications, you can also install React 17 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 17.0.2 on your system. Confirm this with npm list:

$ npm list react
├─┬ [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 easy to learn how to downgrade React version 18 to 17. This process should not take you more than a few seconds and can be done with both npm and yarn.