How to update your React version

avatar

Borislav Hadzhiev

Last updated: Apr 30, 2022

banner

Photo from Unsplash

How to update your React version #

To update your React version, install the latest versions of the react and react-dom packages by running npm install react@latest react-dom@latest. If you use create-react-app, also update the version of react-scripts.

Open your terminal in your project's root directory (where your package.json file is located) and run the following command:

shell
# 👇️ with NPM npm install react@latest react-dom@latest # 👇️ only if you use TypeScript npm install --save-dev @types/react@latest @types/react-dom@latest # ------------------------------ # 👇️ with YARN yarn add react@latest react-dom@latest # 👇️ only if you use TypeScript yarn add @types/react@latest @types/react-dom@latest --dev

The command will update the versions of the react-related packages.

If you get an error, try running the commands with the --force flag, e.g. npm install react@latest --force.

If you use create-react-app, also update the version of the react-scripts package.

shell
# 👇️ With npm npm install react-scripts # ---------------------------------------------- # 👇️ With yarn yarn add react-scripts

If you get an error, run the command with the --force flag or delete your node_modules and package-lock.json (not package.json) files and re-run npm install.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install

Make sure your index.js file uses the new createRoot API.

index.js
import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; // 👇️ make sure to use the correct root element ID // from your public/index.html file const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode>, );

The createRoot() method takes the root element as a parameter and creates a React root.

You can also update the versions of any react-related packages, e.g. react-testing-library by running the command npm install some-package@latest --force.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.