Steps to upgrade your project to React 18
Published: 2023-04-04 00:43:04

---
title: Steps to upgrade your project to React 18
published: true
date: 2022-04-08 08:46:15 UTC
tags: 
canonical_url: https://blog.idoevergreen.xyz/steps-to-upgrade-your-project-to-react-18-clf81ozd4000v09l9fa763dd2
---

React 18 is the next major release of React that was expected to be released in 2019. There are many new features and improvements in this version of React, including a brand new experimental API called Suspense that will make it easier to build interactive and high-performance web applications.

It is important to know that there are no breaking changes in this version of React and you can upgrade to React 18 without any problems. The only thing you need to do when upgrading from React 18 is to update your package dependencies. So we will be upgrading an existing react application to react 18.

# Prerequisites

- Node 14+ or higher installed on your local machine.

- any text editor of choice.

- get your APP\_ID and API\_KEY from [Edaman api](https://developer.edamam.com/edamam-recipe-api).

# Let's get started

This is the GitHub repo containing our react project. [https://github.com/evergreenx/Recipe-Search](https://github.com/evergreenx/Recipe-Search) you could clone the project

```
git clone git@github.com:evergreenx/Recipe-Search.git

```

after cloning the project, create a .env file and add your API key gotten from [Edaman](https://www.edamam.com/)

```
REACT_APP_API_ID = 'your API ID'
REACT_APP_API_KEY= 'your API key'

```

then open the project directory in your IDE of choice run the command to install the project dependencies.

```
npm install
or 
yarn install

```

after installing the node modules

run the project

```
npm run start

or

yarn start

```

you should see a page like this

![recipe-search-55dd2a.netlify.app_.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649018060973/8OSNgFksv.png)

if you check the package.json file this project was created with react 17.0.1.

```
"dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

```

we are going to update the project to react 18.

first off run the command to install the latest version of react and react-dom.

```
npm install react@latest react-dom@latest

or

yarn add react@latest react-dom@latest

```

if everything works out fine you should get updated dependencies looking like this.

```
 "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

```

Hurray 🥳 🥳 🥳 . We just updated the react version to the latest. Now we aren't finally done. if you check your console you should get this error.

![error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1648752220929/Ikcq7Tq_1.png)

So basically react 18 introduces a new root API that makes managing roots easier.

open the index.js file, import the new root API

```
import { createRoot } from 'react-dom/client';

```

replace this part of the `index.js` too

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

// After
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />{" "}
  </React.StrictMode>
);

```

# Conclusion

We were able to upgrade the project to react 18 without issues, so you could use the same steps to upgrade other projects.

You could check out the full blog about [react 18](https://reactjs.org/blog/2022/03/29/react-v18.html) release to learn more.