Una de las reglas de los hooks de React es que deben llamarse en el mismo orden en cada renderizado. React lo necesita para saber en qué orden se llaman los hooks y así mantener el estado de los mismos internamente. Por ello, los hooks no pueden usarse dentro de una condición if, ni un loop, ni tampoco dentro de una función anónima. Siempre deben estar en el nivel superior de la función.
Por eso el siguiente código es incorrecto:
// ❌ código incorrecto por saltar las reglas de los hooks
function Counter() {
const [count, setCount] = useState(0)
// de forma condicional, creamos un estado con el hook useState
// lo que rompe la regla de los hooks
if (count > 0) {
const [name, setName] = useState('midu')
}
return <div>{count} {name}</div>
}También el siguiente código sería incorrecto, aunque no lo parezca, ya que estamos usando el segundo useState de forma condicional (pese a no estar dentro de un if) ya que se ejecutará sólo cuando count sea diferente a 0:
// ❌ código incorrecto por saltar las reglas de los hooks
function Counter() {
const [count, setCount] = useState(0)
// si count es 0, no se ejecuta el siguiente hook useState
// ya que salimos de la ejecución aquí
if (count === 0) return null
const [name, setName] = useState('midu')
return <div>{count} {name}</div>
}Ten en cuenta que si ignoras este error, es posible que tus componentes no se comporten de forma correcta y tengas comportamientos no esperados en el funcionamiento de tus componentes.
Para arreglar este error, como hemos comentado antes, debes asegurarte de que los hooks se llaman en el mismo orden en cada renderizado. El último ejemplo quedaría así:
function Counter() {
const [count, setCount] = useState(0)
// movemos el hook useState antes del if
const [name, setName] = useState('midu')
if (count === 0) return null
return <div>{count} {name}</div>
}Recomendamos revisar las siguientes secciones:
