Se pueden desencadenar varios errores desde React cuando hay un cambio en la cantidad de ganchos o cambia el orden en que se llaman los ganchos. React documenta estas limitaciones/reglas aquí y también documenta formas de corregir los diversos errores.
Entiendo que existen estas reglas, pero ¿por qué existen? La página anterior dice
React se basa en el orden en que se llaman los Hooks
pero, ¿por qué el equipo de React decidió confiar en lo que parece ser una estructura similar a una matriz en lugar de un objeto con clave para acceder a las llamadas de enlace? No parece haber ninguna documentación de React que detalle si esto fue una decisión de diseño o si es inherente a la forma en que los ganchos tienen que funcionar 'bajo el capó'.
Sí, el orden es muy importante.
Solo puedo adivinar por qué eligen hacerlo así.
Su componente es solo una función en realidad. Los ganchos se definen fuera de su componente (función), por lo que cuando se llama a un gancho (por ejemplo, useState ), necesitan una forma de identificar qué gancho se está llamando para que puedan devolver el mismo setState cada vez.
Podrían haber agregado un identificador a la llamada, pero habría sido su responsabilidad pasar identificadores únicos a esta llamada. Aún más, la identificación debe ser única en todo el árbol de vista. Esto significa que debería haber definido una forma de tener identificadores únicos en toda la aplicación.
El uso de la orden soluciona este problema.
Creo que la explicación está aquí: https://reactjs.org/docs/hooks-rules.html#explanation
De los detalles de la documentación:
React se basa en el orden en que se llaman los Hooks
Si queremos ejecutar un efecto condicionalmente, podemos poner esa condición dentro de nuestro Hook
Esto es para que cada componente mantenga su estado consistentemente. Evita errores como llamar a un gancho indefinido o variable de efecto y volver a renderizar el componente total si el estado no se mantiene correctamente.
Dado que podemos usar múltiples ganchos en un solo componente, React necesita una forma estable de llamarlos correctamente, en el orden correcto . Piénselo de esta manera: inicia su componente con un useState() , que contiene datos que se utilizarán en las nuevas renderizaciones. ¿Qué hará React si quitas el gancho? ¿Dónde deben ir los datos? ¿Hacia dónde debe ir el Estado? React no está diseñado para tales casos de uso.
Sin embargo, funciona basándose en el orden en que se llaman los ganchos . ¿Te diste cuenta de que los ganchos son solo funciones, sin ningún tipo de parámetros de orden? La forma en que React puede saber en qué orden llamarlos es haciendo un seguimiento del orden en que los escribió . Eliminar un gancho rompería este orden y crearía inconsistencias y errores.
En la página que ha vinculado, hay una sección de explicación , que responde a su pregunta con un buen ejemplo.