Runtime validation
Validate an unknown prop or external value before rendering or inspecting it.
React 19+ · Type Alias
ReactElement
React elements are UI descriptions created by JSX or createElement. Use isValidElement to distinguish them from other React nodes and arbitrary values.
How it works
A React element is the object description produced by JSX or createElement. Use isValidElement when code receives an unknown value and must distinguish an element from other renderable nodes such as strings, numbers, or arrays.
Syntax
isValidElement(value)Parameters
| Name | Type | Description |
|---|---|---|
value | unknown | The value to test for React-element identity. |
Returns
Returns true when value is a React element; otherwise returns false.
Key points
- A React element describes UI for React to render later; it is not the mounted DOM node.
- The documented sources of React elements are JSX tags and createElement results.
- JSX expressions such as <Button /> produce React elements.
- createElement can produce a React element without JSX.
- Use isValidElement(value) to test whether a value is a React element.
Common mistakes
- A valid React node is not necessarily a React element; numbers, strings, arrays, and other values can render without being elements.
- Do not classify arbitrary objects or arrays as elements without validation.
Example: Validate a React element
import { isValidElement } from 'react';
function Preview({ value }: { value: unknown }) {
return isValidElement(value) ? value : <p>Not an element</p>;
}
export default function App() {
return <Preview value={<strong>Hello</strong>} />;
}Checks an unknown value before treating it as a React element.
When to use it
Conditional rendering
Branch between element-specific handling and fallback content.
Element utilities
Accept either JSX-created elements or createElement results in a utility.
Related
createElementisValidElementJSX