How to Check React Version

What you’ll build or solve

You’ll find the exact React version a project uses. By the end, you’ll be able to confirm the declared version, the installed version, and the runtime version when the app runs.

When this approach works best

This approach works best when:

• You cloned a React repo and need to confirm what version it targets.
• You see a warning or bug that depends on a specific React version.
• You plan an upgrade and want to verify what’s currently in use.
• You follow the docs or a tutorial and want to match the same major version.

This is a bad fit if you do not have access to the project files or the terminal. In that case, you can only infer the version from build output or documentation.

Prerequisites

• A React project folder you can open
• Node.js installed (for npm or yarn commands)
• Basic comfort using a terminal

If your app loads React from a CDN, you only need access to the HTML file.

Step-by-step instructions

Step 1: Read the version from your project files

This method works even if you cannot run the app. It also helps you compare the declared version to the installed version.

Check the declared version (project root)

Open the package.json at the project root and look under dependencies:

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

This tells you what the project expects to use.

Check the installed version (node_modules)

Open:

node_modules/react/package.json

Look for the version field:

{
  "version":"18.2.0"
}

This tells you what actually got installed.

What to look for

• The root package.json shows the declared version range.
• node_modules/react/package.json shows the exact installed version.
• A caret like ^18.2.0 allows compatible updates, so installed versions can drift over time.
• react-dom usually matches the same major version as react.

Step 2: Use npm (or yarn) to check the installed version

This method reads what is installed without opening files manually.

Option A (npm, most common)

npm list react--depth=0

If you want to check both packages:

npm list react react-dom--depth=0

Option B (Yarn)

yarn list--pattern react

What to look for

• The output includes something like react@18.2.0.
• If you see multiple versions, the project may have dependency duplication.

Step 3: Check the version at runtime with React.version

This confirms what React your app is using when it actually runs.

Add this in a file that runs on startup, like App.jsx:

importReactfrom"react";

console.log(React.version);

Start the dev server using your normal command, then open the browser console to see the version.

What to look for

• The console prints a version like 18.2.0.
• If you log this in multiple apps on the same page, such as micro-frontends, versions can differ.

You can also render it temporarily in the UI:

importReactfrom"react";

exportdefaultfunctionDebugBanner() {
return<div>React version: {React.version}</div>;
}

Step 4: Check the version when React is loaded from a CDN

Some projects do not use npm packages. They load React via a script tag.

Open the HTML file and look for React’s URL:

<scriptsrc="https://unpkg.com/react@18/umd/react.production.min.js"></script>

The number after react@ indicates the version or major version range.

What to look for

• react@18 pins to major version 18, but still allows minor updates.
• If there is no @... part in the URL, the CDN may serve the latest version, which can change.

Examples you can copy

Example 1: Quick check using npm

cd my-react-app
npm list react--depth=0

Use this when you need a fast, reliable answer.

Example 2: Compare declared vs installed versions

Declared (package.json):

{
  "dependencies": {
    "react":"^18.2.0"
  }
}

Installed (node_modules/react/package.json):

{
  "version":"18.3.1"
}

This can happen when your lockfile updated and pulled a newer compatible version.

Example 3: Runtime check for debugging

importReactfrom"react";

exportdefaultfunctionDebugBanner() {
return<div>React version: {React.version}</div>;
}

Render this temporarily to confirm the version without opening the console.

Common mistakes and how to fix them

Mistake 1: Running npm commands in the wrong folder

What you might do:

npm list react--depth=0

from a directory that is not the project root.

Why it breaks:

npm reads dependencies from the current folder, so you may get empty output or the wrong project.

Correct approach:

cd path/to/your-project
npm list react--depth=0

Mistake 2: Confusing declared version with installed version

What you might do:

See ^18.2.0 in package.json and assume the installed version is exactly 18.2.0.

Why it breaks:

The caret allows npm to install newer compatible versions.

Correct approach:

Use one of these to confirm the exact installed version:

npm list react--depth=0

or check:

node_modules/react/package.json

Mistake 3: Forgetting to check react-dom

What you might do:

Check only react.

Why it breaks:

react-dom should align with React’s major version. Mismatches can cause runtime issues.

Correct approach:

npm list react react-dom--depth=0

Then confirm both major versions match.

Troubleshooting

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

If npm list react shows nothing, confirm you are in the folder that contains package.json.

If you see Missing script: start, that does not affect version checks. It means you ran a start command in a project without that script.

If React.version fails, confirm you imported React and that the file actually runs in the browser.

If you use a monorepo, run version checks inside the correct package folder, not the repo root.

Quick recap

• Read the declared and installed versions from package.json files.
• Use npm list react --depth=0 to confirm the installed version quickly.
• Log React.version to confirm the runtime version.
• If you use a CDN, inspect the React script tag in your HTML.