Guard element operations
A utility receives unknown content and must decide whether element-specific operations are safe.
React 19+ · Function
isValidElement
Checks whether a value is a React element. It recognizes JSX and createElement results, but not every renderable React node.
How it works
isValidElement(value) performs a type check for a React element created by JSX or createElement. It returns true for those element objects and false for other values, including strings, numbers, arbitrary objects, arrays, and portals.
Syntax
const isElement = isValidElement(value)Parameters
| Name | Type | Description |
|---|---|---|
value | any | The value to test; it may be any type. |
Returns
true when value is a React element; otherwise false.
Key points
- Use it as a boolean guard before code that expects an actual React element object.
- Its call shape is a single-value predicate: pass the candidate value and inspect the boolean result.
- The candidate does not need a preliminary type restriction.
- A JSX-created element produces the positive result.
- Non-element inputs are rejected without being converted into elements.
- Programmatically constructed elements are included in the accepted category.
Common mistakes
- A renderable React node is not necessarily a React element; for example, numbers can be rendered but fail this check.
- Do not use this function to validate arrays of children or portal results.
Example: Check values before treating them as React elements
import { createPortal } from 'react-dom';
import { isValidElement } from 'react';
const values = [
<button key="button">Save</button>,
42,
['text'],
createPortal(<div>Portal</div>, document.body),
];
console.log(values.map(isValidElement));
// [true, false, false, false]The check distinguishes React elements from other renderable values, including numbers, arrays, and portals.
When to use it
Handle heterogeneous input
A component API accepts flexible content and needs to branch between element and non-element handling.
Inspect child values
Code inspects children before applying element-only logic.
Interview questions
QWhat does isValidElement return?
It checks whether a value is a React element and returns a boolean. JSX results and objects returned by createElement pass the check.
Follow-up: Does a React node always pass? No. Nodes can also be strings, numbers, arrays, or portals, which are outside this function's narrower definition.
QWhat is the parameter and return type conceptually?
The function accepts one value of any type. It returns true for React elements and false for other values.
Follow-up: Why is accepting any type useful? It lets code safely inspect unknown values before treating them as element objects.
QWhich values qualify as React elements?
A JSX tag produces a React element, as does calling createElement. Strings, numbers, arbitrary objects, arrays, and portals do not qualify.
Follow-up: How should a component validate a single child? Consider Children.only when the requirement is specifically one React child rather than merely testing an arbitrary value.
Related
createElementcloneElementChildren.onlycreatePortal