How to Update React

What you’ll build or solve

You’ll update a React project to a newer React version.

When this approach works best

This approach works best when:

• You need a newer React version for a library you want to use.
• You want security patches, bug fixes, or improvements from a newer release.
• You are upgrading a project after cloning it and want current dependencies.
• You maintain several apps and want them on the same React version.

This is a bad idea if your project depends on older libraries that do not support the React version you want. Check compatibility first, especially for major version jumps.

Prerequisites

• A React project with a package.json
• Node.js installed
• Your dev server runs successfully before the update
• You know your current version so you can confirm it changed

Check your current version:

npm list react--depth=0

If you use Yarn:

yarn list--pattern react

If you use pnpm:

pnpm list react

Step-by-step instructions

1) Install the updated version

Pick the option that matches your goal, then run it from the project root.

Option A: Update to the latest version (most common)

npm install react@latest react-dom@latest

If you use Yarn:

yarn add react@latest react-dom@latest

If you use pnpm:

pnpm add react@latest react-dom@latest

Option B: Update to a specific version

npm install react@18.3.1 react-dom@18.3.1

Use this when a dependency or team standard requires a specific version.

What to look for

• Update react and react-dom together.
• Keep their major versions aligned.
• Restart your dev server after the install so it loads the updated packages.
• Confirm the installed version changed:

npm list react--depth=0

• If you upgraded across major versions, scan the release notes. Major upgrades can require code changes.

Examples you can copy

Example 1: Update to the latest React

cd my-react-app
npm install react@latest react-dom@latest
npm list react--depth=0

Use this when you want the newest stable release.

Example 2: Pin React to a specific version

npm install react@18.2.0 react-dom@18.2.0

Use this when a dependency or team standard requires a specific version.

Example 3: Update in a Vite project

pnpm add react@latest react-dom@latest
pnpm list react

The update command depends on the package manager, not on Vite vs Create React App.

Common mistakes and how to fix them

Mistake 1: Updating only react

What you might do:

npm install react@latest

Why it breaks:

react-dom can stay on an older major version, which may cause runtime issues.

Correct approach:

npm install react@latest react-dom@latest

Mistake 2: Running the install outside the project root

What you might do:

Run the update command in the wrong folder.

Why it breaks:

The package manager updates the nearest package.json, which might not be your React app.

Correct approach:

cd path/to/your-react-app
npm install react@latest react-dom@latest

Mistake 3: Expecting the running dev server to pick up the update

What you might do:

Keep the server running and refresh the browser.

Why it breaks:

The server process may still use packages already loaded in memory.

Correct approach:

Stop the server with Ctrl + C, then start it again:

npm run dev

Troubleshooting

If you see command not found: npm, install Node.js and restart your terminal.

If you see permission errors during install, avoid sudo. Fix your Node setup instead.

If npm list react shows multiple versions, try:

npm dedupe

If the app errors after a major update, pin back to the last working version:

npm install react@18.2.0 react-dom@18.2.0

If TypeScript or bundler errors appear after updating, delete and reinstall dependencies:

rm-rf node_modules
npm install

Quick recap

• Check your current version with npm list react --depth=0.
• Update React by installing react and react-dom together.
• Use @latest or a specific version number.
• Restart your dev server after updating.
• Re-check the installed version to confirm the change.