JavaScript

Qué significa Invalid Hook Call y cómo solucionarlo

Referencia del error

Invalid Hook Call

Lenguaje

JavaScript

Severidad

Crítica

Cuándo ocurre

React lanza este error cuando un hook (useState, useEffect, etc.) se llama fuera del cuerpo de un componente de función o hook personalizado.

Posibles soluciones

Solo llama a los hooks en el nivel superior de los componentes de función o hooks personalizados. Mueve las llamadas a hooks fuera de condiciones, bucles y funciones anidadas. Si necesitas lógica condicional, ponla dentro del hook, no alrededor de la llamada al hook. Verifica paquetes React duplicados con npm ls react.

Errores relacionados

Rendered Fewer Hooks Than Expected Too many re-renders Each child in a list should have a unique "key" prop

Más detalles

React lanza este error cuando un hook (useState, useEffect, etc.) se llama fuera del cuerpo de un componente de función o hook personalizado. Los hooks dependen de un orden de llamada consistente que React rastrea por instancia de componente, por lo que no pueden usarse en funciones regulares, componentes de clase o condicionalmente.

Por qué ocurre

•Llamar a un hook dentro de una función regular (no React).
•Llamar a un hook dentro de un componente de clase.
•Llamar a un hook condicionalmente (dentro de un if o try/catch).
•Tener dos versiones conflictivas de React en node_modules.

Posibles soluciones

Solo llama a los hooks en el nivel superior de los componentes de función o hooks personalizados. Mueve las llamadas a hooks fuera de condiciones, bucles y funciones anidadas. Si necesitas lógica condicional, ponla dentro del hook, no alrededor de la llamada al hook. Verifica paquetes React duplicados con npm ls react.

Ejemplos

JavaScript

Código que causa el error

function getUser() {
  // regular function, not a component
  const [name, setName] = useState("Alice");
  return name;
}

Error en la terminal

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Código corregido

function UserName() {
  // uppercase name: React treats this as a component
  const [name, setName] = useState("Alice");
  return <span>{name}</span>;
}

Practica en inglés

¿Cómo le explicarías un Invalid Hook Call a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis