Solución: Invalid hook call en React — causas y solución definitiva

¿Por qué ocurre?

React tiene reglas estrictas sobre dónde se pueden llamar los hooks. El error aparece por tres razones: (1) tienes dos instancias de React en el mismo proyecto, (2) estás llamando un hook fuera de un componente funcional o dentro de una función normal, o (3) el componente que usa hooks no está siendo tratado como componente React (nombre en minúsculas).

Solución paso a paso

Diagnóstico rápido — identifica cuál es tu caso:

Caso 1 — Dos versiones de React instaladas (más común):

# Verifica si tienes react duplicado npm ls react

# Si ves algo como: # ├── react@18.3.0 # └── some-library # └── react@17.0.2 ← PROBLEMA

Solución:

# Fuerza que todos usen la misma versión npm dedupe

# O añade en package.json:

{
  "resolutions": {
    "react": "18.3.0"
  }
}

Caso 2 — Hook llamado fuera de un componente:

// ❌ Incorrecto — hook en función normal
function calcularAlgo() {
  const [valor, setValor] = useState(0); // ERROR
  return valor;
}
// ✅ Correcto — hook dentro de componente funcional
function MiComponente() {
  const [valor, setValor] = useState(0);
  return 
{valor};
}
// ❌ Incorrecto — hook en condicional
function Componente({ activo }) {
  if (activo) {
    const [x, setX] = useState(0); // ERROR
  }
}
// ✅ Correcto — hook siempre al nivel superior
function Componente({ activo }) {
  const [x, setX] = useState(0);
  if (!activo) return null;
  return 
{x};
}

Caso 3 — Nombre del componente en minúsculas:

// ❌ React no lo trata como componente
function miComponente() {
  const [x, setX] = useState(0); // ERROR
}// ✅ Primera letra en mayúscula siempre
function MiComponente() {
  const [x, setX] = useState(0);
}

Cómo evitarlo en el futuro

Sigue las dos reglas de hooks de React: (1) solo llama hooks al nivel superior del componente, nunca dentro de condicionales, bucles o funciones anidadas; (2) solo llama hooks desde componentes funcionales o custom hooks. Instala el plugin eslint-plugin-react-hooks para detectarlo automáticamente.