Upgrade React

🔄 Upgrade React

React Version upgrades are usually done through npm (or yarn). The main packages to upgrade are:

  • react

  • react-dom

  • react-scripts (if using Create React App)

  • Any related tooling (Vite, TypeScript, @types/react, react-router, etc.)

✔ Step 1: Check Your Current Version

Run:

npm list react react-dom

✔ Step 2: Upgrade React & ReactDOM

For most React projects:

npm install react@latest react-dom@latest

✔ Step 3: If Using Create React App

Update React + react-scripts:

npm install react@latest react-dom@latest react-scripts@latest

Note: Some major versions may require changing configurations if React Scripts lags behind.

✔ Step 4: If Using Vite

Update React packages only:

npm install react@latest react-dom@latest

Optional dev dependencies:

npm install -D @vitejs/plugin-react@latest

✔ Step 5: If Using TypeScript

Also upgrade type definitions:

npm install -D @types/react@latest @types/react-dom@latest

✔ Step 6: Clear Cache (Optional but Recommended)

npm cache clean --force

✔ Step 7: Delete node_modules and Reinstall

rm -rf node_modules package-lock.json
npm install

✔ Step 8: Restart Your Development Server

npm start
# or
npm run dev

âš  Common Upgrade Issues & Fixes

Issue Fix
“act() not found” / testing errors Upgrade testing-library to latest
Hooks warning Ensure you are not using duplicate React copies
Syntax error on JSX Ensure Babel/Vite config uses correct React plugin

💡 How to Check Latest Version Compatibility

After upgrading, run:

npm outdated

This shows remaining outdated packages.

🚀 Optional: Enable New Features (If Supported)

Automatic JSX runtime (React 17+)

In vite.config.js or Babel config ensure:

jsx: "automatic"

🎉 Done!

You have now successfully upgraded React.

You may also like...