How to Check the React Version at Runtime in the Browser

You can detect the React version at any time by reading React.version (or ReactDOM.version) from the global namespace or from an ES module import.

When working with the facebook/react codebase, knowing exactly which react version is executing in the browser is essential for debugging compatibility issues and verifying deployment artifacts. The library exposes this metadata as a public string property attached to the main entry points.

Accessing the React Version from the Global Namespace

React attaches its version identifier directly to the React object (and to ReactDOM when that package is loaded). This design makes the value accessible immediately after the script loads, regardless of whether you use a CDN link or a bundled UMD build.

Open your browser console and run:

// Check the core React version
console.log(React.version);  // e.g., "19.3.0"

// If ReactDOM is loaded, it mirrors the same version
console.log(ReactDOM.version);  // e.g., "19.3.0"

This works because the UMD and ESM builds attach all exported symbols—including the version property—to the global namespace.

Where the Version String Originates in the Source Code

The version constant follows a single-source-of-truth pattern across the monorepo, starting from a shared definition and flowing into the public API through specific entry files.

The Single Source of Truth in ReactVersion.js

The canonical version string lives in packages/shared/ReactVersion.js. During the release process, the build script scripts/rollup/build-all-release-channels.js replaces the placeholder in this file with the actual semantic version (e.g., 19.3.0) before bundling.

Client-Side Export in ReactClient.js

For browser environments, packages/react/src/ReactClient.js imports the version constant from the shared location and re-exports it as version on the React namespace:

// Simplified representation of the export pattern
export {version} from 'shared/ReactVersion';

This file serves as the primary entry point for the client-side React bundle, ensuring React.version is available immediately upon import.

ReactDOM Export in ReactDOM.js

Similarly, packages/react-dom/src/shared/ReactDOM.js performs an identical re-export for the ReactDOM package. This guarantees that ReactDOM.version matches React.version, providing a consistent interface regardless of which namespace you query.

Detecting React Version in Modern Bundler Environments

If you are using a modern toolchain like Webpack, Vite, or Create React App, React is typically consumed as an ES module. The version property remains accessible on the imported object:

import React from 'react';
import ReactDOM from 'react-dom/client';

function logVersions() {
  console.log(`React: ${React.version}`);
  console.log(`ReactDOM: ${ReactDOM.version}`);
}

logVersions();

This approach is particularly useful for telemetry, error reporting, or conditional logic that depends on specific react version capabilities.

Summary

• React.version and ReactDOM.version expose the running version string at runtime in any browser environment.
• The version originates in packages/shared/ReactVersion.js and is injected at build time by scripts/rollup/build-all-release-channels.js.
• packages/react/src/ReactClient.js and packages/react-dom/src/shared/ReactDOM.js re-export this value to the public API.
• You can access the property from global script tags, UMD builds, or ES module imports with identical syntax.

Frequently Asked Questions

How do I check the React version in the browser console?

Open your browser's developer tools, navigate to the console, and type React.version followed by Enter. If React is loaded on the page, this returns a string like "19.3.0". If you also have ReactDOM loaded, ReactDOM.version returns the same value.

Can I detect the React version programmatically in my application code?

Yes. Whether you use a global script tag or an ES module import, the version property is available on the React object. For module-based projects, import React and access React.version directly. This is useful for feature detection or logging build information to error tracking services.

Why does ReactDOM also have a version property?

ReactDOM mirrors the version export from the shared ReactVersion.js module to maintain API consistency. While the core React and ReactDOM packages are versioned in lockstep, exposing ReactDOM.version allows developers to verify the DOM renderer version independently without importing the core React package, which is helpful in complex monorepo setups or when debugging CDN-loaded scripts.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}