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.
Ejemplos
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ómo solucionarlo
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.
Código corregido
function UserName() {
// uppercase name: React treats this as a component
const [name, setName] = useState("Alice");
return <span>{name}</span>;
}Errores relacionados
¿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