React Is

Common errors

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

  cause 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

  cause 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 />; }`.

Warnings

• breaking The `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`.
• 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.
• gotcha Confusing `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.

Install

• npm install react-is npm
• yarn add react-is yarn
• pnpm add react-is pnpm

Imports

• isValidElementType
  wrong:

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

  correct:

  import { isValidElementType } from 'react-is'

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

  import isElement from 'react-is'

  correct:

  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.

Quickstart

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();