{"id":11735,"library":"react-is","title":"React Is","description":"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.","status":"active","version":"19.2.5","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","react"],"install":[{"cmd":"npm install react-is","lang":"bash","label":"npm"},{"cmd":"yarn add react-is","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-is","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Prefer named ES module imports. CommonJS `require` might work but is not the idiomatic choice for modern projects, especially with bundlers.","wrong":"const { isValidElementType } = require('react-is')","symbol":"isValidElementType","correct":"import { isValidElementType } from 'react-is'"},{"note":"All public APIs are named exports; there is no default export from `react-is`.","wrong":"import isElement from 'react-is'","symbol":"isElement","correct":"import { isElement } from 'react-is'"},{"note":"Used to check if a given value is a React Fragment type (e.g., `<>...</>`).","symbol":"isFragment","correct":"import { isFragment } from 'react-is'"},{"note":"Used to check if a given value is a React.memo component type.","symbol":"Memo","correct":"import { isMemo } from 'react-is'"}],"quickstart":{"code":"import React from 'react';\nimport { isValidElementType, isElement, isFragment, isMemo, isForwardRef } from 'react-is';\n\nconst MyComponent = ({ children }) => <div>{children}</div>;\nconst MemoizedComponent = React.memo(MyComponent);\nconst ForwardRefComponent = React.forwardRef((props, ref) => <div ref={ref} />);\n\nfunction checkReactTypes() {\n  // 1. Check if a value is a valid React component type (e.g., string, class, function, Fragment)\n  console.log('Is `MyComponent` a valid element type?', isValidElementType(MyComponent));\n  console.log('Is `\"div\"` a valid element type?', isValidElementType('div'));\n  console.log('Is `null` a valid element type?', isValidElementType(null));\n\n  // 2. Check if a value is a React element instance (the result of React.createElement)\n  const elementInstance = <MyComponent />;\n  const divElement = <div>Hello</div>;\n  console.log('Is `elementInstance` a React element?', isElement(elementInstance));\n  console.log('Is `divElement` a React element?', isElement(divElement));\n  console.log('Is `MyComponent` (the component itself) a React element?', isElement(MyComponent));\n\n  // 3. Check for specific React special types\n  console.log('Is `React.Fragment` a fragment type?', isFragment(React.Fragment));\n  console.log('Is `MemoizedComponent` a memo type?', isMemo(MemoizedComponent));\n  console.log('Is `ForwardRefComponent` a forwardRef type?', isForwardRef(ForwardRefComponent));\n}\n\ncheckReactTypes();","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=16.0"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=16.0"},{"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.","message":"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).","severity":"gotcha","affected_versions":">=16.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`).","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.","error":"TypeError: (0 , react_is__WEBPACK_IMPORTED_MODULE_0__.isValidElementType) is not a function"},{"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 />; }`.","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.","error":"Uncaught TypeError: Super expression must either be null or a function"}],"ecosystem":"npm"}