JavaScript

Qué significa Rendered Fewer Hooks Than Expected y cómo solucionarlo

Referencia del error

Rendered Fewer Hooks Than Expected

Lenguaje

JavaScript

Severidad

Crítica

Cuándo ocurre

React rastrea los hooks por su orden de llamada.

Posibles soluciones

Siempre llama a todos los hooks al principio del componente antes de cualquier return condicional. Mueve el return anticipado después de todas las declaraciones de hooks. Usa la lógica interna del hook (condiciones if dentro del cuerpo del hook) para manejar el comportamiento condicional.

Errores relacionados

Invalid Hook Call Too many re-renders Cannot Update During Rendering

Más detalles

React rastrea los hooks por su orden de llamada. Si el número de hooks llamados cambia entre renderizados (debido a un return anticipado o una llamada a hook condicional), React lanza este error. Las reglas de los hooks requieren que cada renderizado llame a los mismos hooks en el mismo orden.

Por qué ocurre

•Una sentencia return anticipada antes de todas las llamadas a hooks.
•Un hook llamado dentro de un bloque if/else que solo se ejecuta a veces.
•Un hook llamado dentro de un try/catch que se omite cuando no hay error.
•Un componente que renderiza condicionalmente conjuntos completamente diferentes de hooks.

Posibles soluciones

Siempre llama a todos los hooks al principio del componente antes de cualquier return condicional. Mueve el return anticipado después de todas las declaraciones de hooks. Usa la lógica interna del hook (condiciones if dentro del cuerpo del hook) para manejar el comportamiento condicional.

Ejemplos

JavaScript

Código que causa el error

function UserCard({ user }) {
  if (!user) return null; // early return BEFORE hooks
  const [liked, setLiked] = useState(false);
  return <div onClick={() => setLiked(true)}>{user.name}</div>;
}

Error en la terminal

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Código corregido

function UserCard({ user }) {
  const [liked, setLiked] = useState(false); // hook BEFORE early return
  if (!user) return null;
  return <div onClick={() => setLiked(true)}>{user.name}</div>;
}

Practica en inglés

¿Cómo le explicarías un Rendered Fewer Hooks Than Expected 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