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.
Ejemplos
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ómo solucionarlo
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.
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>;
}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