How to Check React Version? [React Latest Version]

Open a terminal in your project folder and run:

npm list react --depth=0

That's it. You'll see something like react@18.2.0. If you'd rather peek at a file, open package.json and look under dependencies. Need it from the browser? Type React.version in DevTools (only works if React is exposed globally). This is one of the first things to check when auditing your Node.js stack.

✅ Why You Might Need to Know Your React Version?

🔄 Version Compatibility

Not all third-party libraries or tools support every React version. Using outdated React might prevent you from leveraging modern UI frameworks, hooks, or features introduced in recent releases like Concurrent Mode or Server Components. If you're working across multiple projects, it's worth checking your npm version too — package manager compatibility often trips up React upgrades.

🚀 Migration Planning

Before upgrading your project, knowing the current version helps plan dependencies, read migration guides, and avoid compatibility issues.

🐛 Debugging Errors

Sometimes errors occur because your version of React lacks support for certain methods or hooks. Checking the version helps identify whether it's a bug, a deprecated feature, or an unsupported API.

💻 How to Check Your React Version?

🔍 Method 1: Check React Version in package.json File

Your first stop should be the package.json file located in your project's root directory. This file contains a list of dependencies including the installed React version.

📋 Steps:

1. Open your React project folder.
2. Open package.json using a code editor (like VS Code).
3. Look under the dependencies section for react and react-dom.

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  ...
}

The ^ symbol in ^18.2.0 means the version can be updated to any minor or patch version under 19.x.x. The declared version is a range — the installed version may be slightly newer. That's normal.

🟢 Pro Tip: If you're planning to upgrade React, refer to the React changelog first to ensure you're aware of potential breaking changes.

💻 Method 2: Use React Version Command in CLI

One of the easiest and most accurate ways to check your React version is using the command line. This gives you the version actually sitting in node_modules — if you want the resolved truth, this is the command. If you're auditing your entire dev environment, you might also want to check your Node.js version alongside React.

📌 Commands to Use:

Open your terminal in your React project folder and run:

npm list react --depth=0

Expected Output:

my-react-app@0.1.0 /Users/you/projects/my-react-app
└── react@18.2.0

Method 3: Check react-dom alongside react

React and ReactDOM should always match. Mismatched versions cause weird hydration bugs and "invalid hook call" errors.

npm ls react react-dom

Method 4: Inspect node_modules directly

Open node_modules/react/package.json. The "version" field is the ground truth. Useful when something feels off and you don't trust the rest of the tree.

🌐 Method 5: Using Browser Console or DevTools to Check React Version

If your React app is running in the browser, you can check the React version directly using Developer Tools. This approach works similarly for other libraries — for example, you can also check jQuery version through the console if your project uses it.

👇 Steps:

1. Open your application in the browser.
2. Open DevTools (Right-click → Inspect or press Ctrl + Shift + I).
3. Go to the Console tab.
4. Type: React.version

If React is exposed globally (which is often true in development mode), it will return something like "18.2.0". However, modern bundlers don't always expose React on window. If it returns undefined, temporarily add window.React = React in your entry file, or use the React DevTools extension and check the component inspector.

Alternative: If React DevTools is installed, it may also expose this variable through __REACT_DEVTOOLS_GLOBAL_HOOK__. This is useful if you're debugging or need deeper inspection.

Check React Version with npm, Yarn, pnpm, and Bun

npm

npm list react --depth=0
npm view react version   # latest published version on npm

Make sure your npm itself is up to date — an outdated package manager can cause install issues. See our guide on how to check your npm version.

Yarn

yarn list --pattern react
yarn why react           # shows why and which version is installed

pnpm

pnpm list react
pnpm why react

Bun

bun pm ls | grep react

Each one reads from the lockfile and reports the resolved version. If you've recently switched package managers, delete the old lockfile or you'll get conflicting answers.

How to Check If React Is Installed

Run npm list react. Three possible outcomes:

• Version returned — you're good. React is installed.
• Empty tree or "(empty)" — package isn't installed in this project.
• Error: Cannot find module 'react' — declared in package.json but node_modules is missing or broken. Run npm install.

To install from scratch:

npm install react react-dom
# or
yarn add react react-dom
# or
pnpm add react react-dom

How to Check React Version in VS Code

Three quick ways inside the editor:

1. Press Ctrl+P, type package.json, hit Enter. Scan for react.
2. Open the integrated terminal (Ctrl+`) and run npm list react --depth=0.
3. Use the search panel (Ctrl+Shift+F), search for "react": — useful in monorepos where multiple package.json files exist.

🧰 How to Check React Version in Specific Frameworks?

📦 Create React App (CRA)

CRA is essentially dormant now, but if you're still on it, check package.json. You can also run:

npx create-react-app --version
npm list react
npm list react-dom

Vite

Vite doesn't pin React itself — it's just the bundler. Check your project's package.json like any other app. Same commands apply.

🌍 Next.js

Next ships its own React requirements per major version. To check via CLI:

npm list react
npm list next

Don't bump React past what your Next version supports. Run npm list react next together to see both.

Gatsby

Same approach — npm list react works fine. Gatsby pins peer dependencies, so check compatibility before upgrading.

npm list react
npm list gatsby

📱 React Native / Expo

Two different versions to track here. To check React Native version, you can run:

npm view react-native version
npm ls react-native -g
npx expo --version    # for Expo CLI

Expected Output:

/usr/local/lib
└── react-native@0.73.0

You can also check package.json:

"react-native": "0.73.0"

The React version and React Native version are not the same thing. Beginners conflate them all the time. Want more mobile-specific insights? Check out our guide on How to Check Angular Version — great for comparing multi-framework apps.

Installed Version vs Latest Stable React Version

This trips people up constantly:

• Installed version — what's actually in your node_modules right now.
• Declared version — the range in package.json (e.g., ^18.2.0).
• Latest stable — the newest production-ready release on npm.
• Canary / experimental / alpha — pre-release builds. Don't ship these.

To check the latest stable release, run:

npm view react version

Or verify directly on the official React npm page and the React blog. Those are the only two sources to trust for "what's current."

📊 React Version Feature Map

This is useful when comparing your current setup with a project that uses more modern React functionality. For example, if your version is <16.8, you won't be able to use hooks like useState. Knowing this helps you avoid using unsupported features in your app and prevents migration surprises.

🚧 Common Issues & Troubleshooting

❌ React Not Found

If running npm list react or npm view react version returns an empty output or a message like:

-- react@empty

or

npm ERR! missing: react@*, required by your-project@0.1.0

🔎 Possible Causes:

• You're not inside a valid React project folder.
• React hasn't been installed yet.
• Your node_modules folder is missing or corrupted.

🛠️ Solutions:

Check if you're in the right directory:

pwd   # On Mac/Linux
cd path/to/your/react-project

Install React and ReactDOM manually:

npm install react react-dom

If you use Yarn:

yarn add react react-dom

❌ Version Mismatch Between React and ReactDOM

React and ReactDOM should ideally be on the same version to avoid rendering or hydration issues, especially in projects using SSR (like Next.js) or strict mode.

📉 Symptoms:

• Runtime errors like Invariant Violation
• Hydration warnings in the browser
• Broken rendering or lifecycle behavior

🛠️ Fix:

Check both versions using:

npm list react
npm list react-dom

If they differ, align them by reinstalling:

npm install react@18.2.0 react-dom@18.2.0

🧠 Why It Matters: ReactDOM handles the rendering process, so mismatched versions can cause unexpected UI behavior or development errors.

❌ Multiple copies of React detected

React DevTools throws this via __REACT_DEVTOOLS_GLOBAL_HOOK__ when two Reacts end up in your bundle. Common in monorepos, linked packages, and workspace setups. Diagnose with:

npm ls react

If you see React listed under multiple paths, dedupe:

npm dedupe

For pnpm workspaces, hoist React to the root. For Yarn, use resolutions in your root package.json. In a monorepo, this is almost always a hoisting problem — fix it once and document it.

❌ CLI Commands Not Working or Hanging

Sometimes, commands like npm list, npm install, or npm start might fail or hang unexpectedly.

🔎 Common Reasons:

• Corrupted node_modules
• Outdated package-lock.json
• Version conflicts between packages

🛠️ Steps to Fix:

rm -rf node_modules package-lock.json
npm install

If using Yarn:

rm -rf node_modules yarn.lock
yarn install

Optional: Clear the npm cache to avoid using corrupt packages:

npm cache clean --force

❓ Still Not Working?

Try creating a new React project using Create React App to test your Node/npm setup:

npx create-react-app test-app
cd test-app
npm list react

If this works but your original project still fails, the issue may be specific to your project configuration or dependencies.

How to Update or Downgrade React Version?

Once you've learned how to check your React version, the next step is knowing how to update it — especially if you're planning to use modern features or fix security vulnerabilities.

🆙 Upgrade React to the Latest Version

npm install react@latest react-dom@latest

Or if you use Yarn:

yarn add react@latest react-dom@latest

You can confirm the update with:

npm list react
npm list react-dom

⬇️ Downgrade to a Specific Version

Sometimes, certain dependencies require you to stick with an older version. You can downgrade React like this:

npm install react@16.14.0 react-dom@16.14.0

Then verify it in your package.json:

"dependencies": {
  "react": "^16.14.0",
  "react-dom": "^16.14.0"
}

After any version change: clear your build cache, restart the dev server, run your tests, and check your framework's compatibility notes. Next.js, Gatsby, and React Native each have their own React support matrix.

📋 Final Checklist

Before wrapping up, here's a summary of everything you can do:

• ✅ Use package.json to check version in package.json
• ✅ Use npm list react or yarn list react for CLI checks
• ✅ Use the browser console to view React.version
• ✅ Check React Native or Next.js versions with appropriate commands
• ✅ Troubleshoot version issues and plan upgrades safely

Related Version-Check Guides

If you're auditing your stack, check out our guides for Node.js and npm, or compare workflows with Angular and jQuery. Want to become a multi-framework expert? Start by exploring the 10 Best Programming Languages to Learn in 2025. Deploying somewhere? Our Linux VPS hosting handles Node/React builds without the shared-hosting headaches.

People Are Also Reading:

• How to check angular version?
• How to Check jQuery Version?
• How to Check Java Version?
• How to check node.js version?
• How to Check NPM Version?
• How to Update Python Version?