isValidElement

const isElement = isValidElement(value)

• Referência
  • isValidElement(value)
• Uso
  • Verificando se algo é um elemento React

Referência

isValidElement(value)

Chame isValidElement(value) para verificar se value é um elemento React.

import { isValidElement, createElement } from 'react';

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

// ❌ Não são elementos React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Veja mais exemplos abaixo.

Parâmetros

• value: O value que você deseja verificar. Pode ser qualquer valor de qualquer tipo.

Retornos

isValidElement retorna true se o value for um elemento React. Caso contrário, retorna false.

Ressalvas

• Apenas tags JSX e objetos retornados por createElement são considerados elementos React. Por exemplo, embora um número como 42 seja um nó React válido (e possa ser retornado de um componente), não é um elemento React válido. Arrays e portais criados com createPortal também não são considerados elementos React.

Uso

Verificando se algo é um elemento React

Chame isValidElement para verificar se algum valor é um elemento React.

Elementos React são:

• Valores produzidos pela escrita de uma tag JSX
• Valores produzidos pela chamada de createElement

Para elementos React, isValidElement retorna true:

import { isValidElement, createElement } from 'react';

// ✅ Tags JSX são elementos React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Valores retornados por createElement são elementos React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Qualquer outro valor, como strings, números ou objetos e arrays arbitrários, não são elementos React.

Para eles, isValidElement retorna false:

// ❌ Estes *não* são elementos React
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

É muito incomum precisar de isValidElement. É mais útil se você estiver chamando outra API que apenas aceita elementos (como cloneElement faz) e deseja evitar um erro quando seu argumento não é um elemento React.

A menos que você tenha algum motivo muito específico para adicionar uma verificação isValidElement, provavelmente não precisará dela.

function MyComponent() {
  // ... você pode retornar qualquer nó React ...
}

function MyComponent() {
  return 42; // É aceitável retornar um número de um componente
}