Welche Regeln gibt es für das Schreiben von Hooks in React?

• Hooks nur auf der obersten Ebene funktionaler Komponenten oder innerhalb anderer benutzerdefinierter Hooks aufrufen. Hooks dürfen nicht in Schleifen, Bedingungen oder verschachtelten Funktionen aufgerufen werden.
• Hooks nur innerhalb von React-Funktional-Komponenten aufrufen. Nicht in normalen JavaScript-Funktionen oder Klassenkomponenten.
• Die Verwendung von useCallback zur Memoisierung von Funktionen und useMemo zur Memoisierung von Berechnungen hilft, die Leistung zu optimieren.
• useEffect für Nebenwirkungen (Daten laden, Abonnements usw.) verwenden und ein Abhängigkeitsarray angeben, um die Ausführung des Effekts zu steuern.
• Die Reihenfolge der Hook-Aufrufe bei jedem Rendern der Komponente einhalten. React verlässt sich auf diese Reihenfolge, um Zustand und Effekte korrekt zu verknüpfen.
• Stabile Abhängigkeiten in den Abhängigkeitsarrays von useEffect, useCallback, useMemo verwenden. Keine Objekte oder Funktionen übergeben, die bei jedem Rendern ohne Notwendigkeit neu erstellt werden.
• Eigene benutzerdefinierte Hooks erstellen, um die Zustandslogik zwischen Komponenten wiederzuverwenden. Die Namen sollten mit use beginnen.

// Richtiger Beispiel: Hooks auf oberster Ebene aufrufen
function MyComponent() {
  const [count, setCount] = useState(0); // Auf oberster Ebene

  useEffect(() => { // Auf oberster Ebene
    document.title = `Sie haben ${count} Mal geklickt`;
  }, [count]); // Abhängigkeitsarray

  const handleClick = useCallback(() => { // Auf oberster Ebene
    setCount(c => c + 1);
  }, []); // Memoisierte Funktion

  return (
    <div>
      <p>Sie haben {count} Mal geklickt</p>
      <button onClick={handleClick}>
        Klicken Sie mich
      </button>
    </div>
  );
}

// Falsches Beispiel: Hook in einer Bedingung aufrufen
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // FALSCH: Aufruf in Bedingung
//   }
//   // ...
// }

// Falsches Beispiel: Hook in einer Schleife aufrufen
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // FALSCH: Aufruf in Schleife
//   }
//   // ...
// }