react-is

library19.2.5jsnpmunverified

react-is is a low-level utility package provided by the React team for performing "brand checking" on React elements and types. This library exports a set of predicate functions (e.g., `isElement`, `isValidElementType`, `isFragment`, `isMemo`) that allow developers, particularly library authors, to programmatically determine the specific type or "brand" of a React node without relying on potentially unstable internal properties. The current stable version is 19.2.5, aligning with the major version of React itself, indicating a close release cadence tied to the main React project. Its primary differentiation is providing a stable, official API for introspecting React elements, which is crucial for tools, renderers, and component libraries that need to handle various React node types robustly, unlike direct checks on `$$typeof` which are considered internal and unstable. It does not provide UI components but rather helper functions for type introspection.

web-framework

npm install react-is

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-IS

react-is

web-frameworkjavascriptv19.2.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

isValidElementType

✓ import { isValidElementType } from 'react-is'

✗ const { isValidElementType } = require('react-is')

Prefer named ES module imports. CommonJS `require` might work but is not the idiomatic choice for modern projects, especially with bundlers.

isElement

✓ import { isElement } from 'react-is'

✗ import isElement from 'react-is'

All public APIs are named exports; there is no default export from `react-is`.

isFragment

✓ import { isFragment } from 'react-is'

Used to check if a given value is a React Fragment type (e.g., `<>...</>`).

Memo

✓ import { isMemo } from 'react-is'

Used to check if a given value is a React.memo component type.

Demonstrates the core utility functions of `react-is` by checking various React component types and element instances. This example covers `isValidElementType`, `isElement`, `isFragment`, `isMemo`, and `isForwardRef` to differentiate between different forms of React nodes and types.

import React from 'react'; import { isValidElementType, isElement, isFragment, isMemo, isForwardRef } from 'react-is'; const MyComponent = ({ children }) => <div>{children}</div>; const MemoizedComponent = React.memo(MyComponent); const ForwardRefComponent = React.forwardRef((props, ref) => <div ref={ref} />); function checkReactTypes() { // 1. Check if a value is a valid React component type (e.g., string, class, function, Fragment) console.log('Is `MyComponent` a valid element type?', isValidElementType(MyComponent)); console.log('Is `"div"` a valid element type?', isValidElementType('div')); console.log('Is `null` a valid element type?', isValidElementType(null)); // 2. Check if a value is a React element instance (the result of React.createElement) const elementInstance = <MyComponent />; const divElement = <div>Hello</div>; console.log('Is `elementInstance` a React element?', isElement(elementInstance)); console.log('Is `divElement` a React element?', isElement(divElement)); console.log('Is `MyComponent` (the component itself) a React element?', isElement(MyComponent)); // 3. Check for specific React special types console.log('Is `React.Fragment` a fragment type?', isFragment(React.Fragment)); console.log('Is `MemoizedComponent` a memo type?', isMemo(MemoizedComponent)); console.log('Is `ForwardRefComponent` a forwardRef type?', isForwardRef(ForwardRefComponent)); } checkReactTypes();

Debug

Known issues

breakingThe `react-is` package closely tracks the major version of `react`. While `react-is` itself rarely introduces breaking API changes, using an incompatible major version (e.g., `react-is@19` with `react@18`) can lead to subtle bugs or incorrect type checks due to internal changes in React's element structure. Always ensure `react-is` and `react` major versions are aligned.

fix

Update `react-is` to match the major version of your `react` dependency. For example, if you are using `react@19.x.x`, use `react-is@19.x.x`.

affects: >=16.0

gotcha`react-is` is primarily designed for library authors and advanced tooling that needs to deeply introspect React elements and types. For most application-level logic, directly using `React.isValidElement()` (to check if something is an element instance) or `typeof` checks for basic component types might be sufficient and simpler. Over-reliance on `react-is` for simple cases can lead to unnecessary complexity.

fix

Evaluate if `react-is` is truly necessary. If you only need to check if something is a rendered React element, `React.isValidElement()` is usually enough. For checking if a value is a component function/class, `typeof Component === 'function'` is often sufficient.

affects: >=16.0

gotchaConfusing `isValidElementType` with `isElement` (or `React.isValidElement`). `isValidElementType(value)` checks if `value` is a *type* that React can render (e.g., a function component, class component, string literal like 'div', or a special type like `React.Fragment`). `isElement(value)` (or `React.isValidElement(value)`) checks if `value` is an *instance* of a React element (the result of calling `React.createElement` or JSX transformation).

fix

Understand the distinction: `isValidElementType` for *component definitions*, `isElement` for *rendered element instances*. Use the correct function based on whether you have a component constructor/type or an already created virtual DOM node.

affects: >=16.0

Errors

Common errors & fixes

TypeError: (0 , react_is__WEBPACK_IMPORTED_MODULE_0__.isValidElementType) is not a function

This error typically occurs in modern module environments (like Webpack or Vite) when attempting to use a CommonJS `require` statement for named ES module exports, or when a bundler misinterprets the module format. `react-is` uses named ES module exports.

fix

Ensure you are using ES module `import { isValidElementType } from 'react-is'` syntax. If using TypeScript, check your `tsconfig.json` for correct `moduleResolution` settings (e.g., `bundler` or `node16`).

Uncaught TypeError: Super expression must either be null or a function

This error often indicates that React tried to render a component whose type was not a function or class, or was `null` or `undefined`. While not directly from `react-is`, failing to use `react-is` to validate component types can lead to such runtime errors if invalid types are passed to rendering functions.

fix

Before rendering, use `isValidElementType` to ensure that a value intended to be a React component type is actually valid. For example, `if (isValidElementType(MyComponent)) { return <MyComponent />; }`.

Upgrade

Version history

19.2.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/react ↗

packagehttps://www.npmjs.com/package/react-is ↗

homepagehttps://react.dev/ ↗