How to Downgrade React Version 18 to 17

When working on React, every programmer chooses the version they are comfortable with and also the one that is most compatible with the programs they are working on. Well, in that case, you have to downgrade react version. If you have version 18, you can downgrade react version 18 to 17, the latest and compatible version of 17 is 17.02, which is mostly used.

Let’s take a look at how to downgrade React version 18 to 17

How to downgrade React version 18 to 17

To downgrade the react version, follow the step-by-step procedure to easily downgrade to the 17 version

Run create-react-app

You need to create a folder and name it whatever you like, or to remember, you can also name it something like react-downgrade-2022. After naming it, open the terminal, and then run

npx create-react-app

Uninstall react-dom and react version 18

When you installed and created a react app, the react-dom 18 as well as react 18 are also created. As you are downgrading to 17.0.2, you don’t need the 18 dom. Check out how you have version 18 react and its dom created

{
  "name": "react-downgrade-2022",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0", // <===
    "react-dom": "^18.0.0", // <===
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

We have to remove the traces of version 18 before downgrading the version. To uninstall react 18 as well as react-dom 18, run the following command

npm uninstall react react-dom

Install react 17

The third step that we need to follow is to install the react 17 version along with react-dom 17 that we really need. To install, run the below command

npm install [email protected] [email protected]

Change the index.js to React Version 17

You need to remember that you had react 18 installed in your system, and the index.js still have version 18 default settings that you need to change according to version 17.0.2. You can just navigate into your index.js file in the directory ‘src’. You will see something like this

// react 18

import React from 'react';
import ReactDOM from 'react-dom/client';
import './style.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Copy the following code in your index.js file to remove react 18 settings

// react 17.0.2

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

Run the Version 17

Once you follow all the above steps, you just have to start the 17 version. Check the command

npm start

Conclusion

And that is how you downgrade React version 18 to 17.0.2, which is the latest and compatible version. I wish you luck for downgrading from version 18 to 17!