DEV Community

ido dickson evergreen
ido dickson evergreen

Posted on • Originally published at blog.idoevergreen.xyz on

Steps to upgrade your project to React 18

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.

Let's get started

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

git clone git@github.com:evergreenx/Recipe-Search.git
Enter fullscreen mode Exit fullscreen mode

after cloning the project, create a .env file and add your API key gotten from Edaman

REACT_APP_API_ID = 'your API ID'
REACT_APP_API_KEY= 'your API key'
Enter fullscreen mode Exit fullscreen mode

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

npm install
or 
yarn install
Enter fullscreen mode Exit fullscreen mode

after installing the node modules

run the project

npm run start

or

yarn start
Enter fullscreen mode Exit fullscreen mode

you should see a page like this

recipe-search-55dd2a.netlify.app_.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"
  },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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

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';
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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 release to learn more.

Top comments (0)