isValidElement

isValidElement checks whether a value is a React element.

const isElement = isValidElement(value)

Usage
- Checking if something is a React element
Reference
- isValidElement(value)

Usage

Checking if something is a React element

Call isValidElement to check if some value is a React element.

React elements are:

Values produced by writing a JSX tag
Values produced by calling createElement

For React elements, isValidElement returns true:

import { isValidElement, createElement } from 'react';

// ✅ JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.

For them, isValidElement returns false:

// ❌ These are *not* React elements
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

It is very uncommon to need isValidElement. It’s mostly useful if you’re calling another API that only accepts elements (like cloneElement does) and you want to avoid an error when your argument is not a React element.

Unless you have some very specific reason to add an isValidElement check, you probably don’t need it.

Deep Dive

React elements vs React nodes

When you write a component, you can return any kind of React node from it:

function MyComponent() {
  // ... you can return any React node ...
}

A React node can be:

A React element created like <div /> or createElement('div')
A portal created with createPortal
A string
A number
true, false, null, or undefined (which are not displayed)
An array of other React nodes

Note isValidElement checks whether the argument is a React element, not whether it’s a React node. For example, 42 is not a valid React element. However, it is a perfectly valid React node:

function MyComponent() {
  return 42; // It's ok to return a number from component
}

This is why you shouldn’t use isValidElement as a way to check whether something can be rendered.

Reference

`isValidElement(value)`

Call isValidElement(value) to check whether value is a React element.

import { isValidElement } from 'react';

// ✅ React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

See more examples above.

Parameters

value: The value you want to check. It can be any a value of any type.

Returns

isValidElement returns true if the value is a React element. Otherwise, it returns false.

Caveats

Only JSX tags and objects returned by createElement are considered to be React elements. For example, even though a number like 42 is a valid React node (and can be returned from a component), it is not a valid React element. Arrays and portals created with createPortal are also not considered to be React elements.

PreviousFragment (<>...</>)Nextlazy