Quelles sont les règles des hooks, et pourquoi existent-elles ?

N'appelez les hooks qu'au niveau supérieur d'un composant ou d'un autre hook, jamais dans une condition, une boucle ou un callback imbriqué, et uniquement depuis des fonctions React. La raison, c'est que React stocke l'état des hooks sous forme de liste ordonnée sur la fibre et associe chaque appel à un emplacement par ordre d'appel, pas par nom. Changez l'ordre entre deux rendus et tous les hooks après ce point lisent le mauvais emplacement.

Deux règles : les hooks vont au niveau supérieur, et ils ne sont appelés que depuis un composant ou un autre hook. La raison, c'est l'implémentation. React ne connaît pas le nom de vos hooks, il tient une liste sur la fibre et déplace un curseur dedans pendant que votre fonction s'exécute, donc le premier appel à useState prend l'emplacement un, le deuxième l'emplacement deux, et ainsi de suite. Si vous enveloppez un hook dans un if, alors sur certains rendus le curseur se décale d'une position, et tous les hooks suivants lisent l'état du hook précédent. Vous obtenez des pannes bizarres où un booléen se transforme en fonction. Quand j'ai besoin de quelque chose conditionnellement, j'appelle toujours le hook et je fais en sorte que le hook lui-même ne fasse rien, par exemple en passant un flag enabled à un hook de requête, ou je remonte la branche d'un niveau pour que les deux chemins soient des composants séparés. Je garde les règles eslint actives et je traite une suppression comme quelque chose qui exige un commentaire expliquant précisément pourquoi.