---
title: "How to Upgrade to React 18 | CoderPad"
description: "While React 18 is not yet a stable release, testing out your application can be useful."
canonical: "https://coderpad.io/blog/development/how-to-upgrade-to-react-18/"
last_modified: "2023-06-05 14:37:32"
---
[Back to blog](https://coderpad.io/blog/)
# How to Upgrade to React 18
January 6, 2022 2 Minute Read
By Corbin Crutchley
[Development](https://coderpad.io/blog/development/)
React 18 is the latest in a long line of major releases of React. With it you gain access to: [new features for Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html), new [useId](https://github.com/reactwg/react-18/discussions/111), [useSyncExternalStore](https://github.com/reactwg/react-18/discussions/86), and [useDeferredValue](https://github.com/reactwg/react-18/discussions/100) hooks, as well as the new [startTransition](https://github.com/reactwg/react-18/discussions/100) API.
While React 18 is not yet a stable release, testing out your application can be useful.
Like with previous major releases of React, React 18 is a fairly easy migration for most apps.
While [Strict Mode has received some changes](https://github.com/reactwg/react-18/discussions/19) that may impact your app, and [automatic batching](https://github.com/reactwg/react-18/discussions/21) may introduce some new edge cases, they only impact apps that don’t [follow the Rules of React properly](https://reactjs.org/docs/hooks-rules.html).
Outside of those considerations, let’s upgrade!
## Learn how to run front-end developer interviews that don’t suck
[Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/)
## Installation
First, start by installing React 18:
```
npm i react@18.0.0-rc.0 react-dom@18.0.0-rc.0Code language: CSS (css)
```
Or, if you use`yarn`:
```
yarn add react@18.0.0-rc.0 react-dom@18.0.0-rc.0Code language: CSS (css)
```
If you’re using Create React App, you may also want to [upgrade to the newest v5](https://github.com/facebook/create-react-app/releases/tag/v5.0.0) as well using:
```
npm i react-scripts@5Code language: CSS (css)
```
Or
```
yarn add react-scripts@5Code language: CSS (css)
```
Then, make sure to upgrade any dependencies that might rely on React.
For example, upgrade [React Redux to v8](https://github.com/reduxjs/react-redux/releases/tag/v8.0.0-beta.2) or [SWR to 1.1.0](https://github.com/vercel/swr/releases/tag/1.1.0)
## Update`render`method
After you install React 18, you may receive an error when your app is running:
>
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: [[https://reactjs.org/link/switch-to-createroot](https://reactjs.org/link/switch-to-createroot)](https://reactjs.org/link/switch-to-createroot)
This is because previously, in React 17 and before, you’d have a file – usually called`index.js`or`index.ts`– that included the following code:
```
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);Code language: JavaScript (javascript)
```
While this code will continue to function for this release, it will not allow you to leverage most of the new features of React 18. Further, it’ll be removed in a future release of React.
To fix this issue, replace this code with the following:
```
const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(
);Code language: JavaScript (javascript)
```
When finished, you should be able to verify the version of React you’re using with`{React.version}`
## Conclusion
As promised, the update to React 18 is fairly straightforward! Most applications should be able to upgrade without too many problems.
If you run into issues during your migration and you’re using`StrictMode`, try temporarily removing it to see if you run into any issues. [React 18 introduced some changes that may impact some apps.](https://github.com/reactwg/react-18/discussions/19)
We hope you enjoy the new [React concurrent features](https://github.com/reactwg/react-18/discussions/4) and happy hacking!
## Subscribe for more CoderPad insights
## Trending Articles
Previous slide Next slide [Development
## What is Prompt Engineering?
Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.
Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development
## A Guide To Using React’s useCallback() Hook
Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.
Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development
## MySQL vs. PostgreSQL: How Do They Compare?
A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.
Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development
## PostgreSQL LIKE Operator: A Detailed Guide
When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.
Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development
## How To Use DataProvider In TestNG With Examples
When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.
Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development
## How To Get Up And Running With Django Migrations: A Guide
Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.
Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development
## Writing A Parameterized Test In JUnit With Examples
A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.
Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development
## How To Use Assert In JUnit With Examples
The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.
Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development
## A Simple Guide To TypeORM: What It Is And How To Use It
Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.
Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development
## Using PreparedStatement in JDBC With Examples
In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.
Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development
## React vs React Native: The Differences Explained
React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.
Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development
## Logging in Django
The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.
Read the post](https://coderpad.io/blog/development/logging-in-django/)
## Hire with confidence.
See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.
[Request a demo](https://coderpad.io/sales/)