Was sind die Rules of Hooks, und warum gibt es sie?

Ruf Hooks nur auf der obersten Ebene einer Komponente oder eines anderen Hooks auf, nie in einer Bedingung, einer Schleife oder einem verschachtelten Callback, und nur aus React-Funktionen heraus. Der Grund: React speichert Hook-State als geordnete Liste am Fiber und ordnet jeden Aufruf über die Aufrufreihenfolge einem Slot zu, nicht über den Namen. Ändert sich die Reihenfolge zwischen Renders, liest jeder Hook danach den falschen Slot.

Zwei Regeln: Hooks gehören auf die oberste Ebene, und sie werden nur aus einer Komponente oder einem anderen Hook aufgerufen. Der Grund liegt in der Implementierung. React kennt die Namen deiner Hooks nicht, es hält eine Liste am Fiber und schiebt einen Cursor durch sie, während deine Funktion läuft. Der erste useState-Aufruf bekommt Slot eins, der zweite Slot zwei und so weiter. Packst du einen Hook in ein if, landet der Cursor bei manchen Renders eine Position daneben, und jeder Hook danach liest den State des vorherigen. Dann bekommst du bizarre Fehler, bei denen aus einem Boolean plötzlich eine Funktion wird. Wenn ich etwas wirklich bedingt brauche, rufe ich den Hook trotzdem immer auf und lasse den Hook selbst nichts tun, zum Beispiel über ein enabled-Flag an einem Query-Hook, oder ich ziehe die Verzweigung eine Ebene hoch, sodass die zwei Pfade getrennte Komponenten sind. Ich lasse die eslint-Regeln an und behandle eine Ausnahme als etwas, das einen Kommentar braucht, der genau erklärt, warum.