Welke regels bestaan er voor het schrijven van hooks in React?

• Roep hooks alleen aan op het hoogste niveau van functionele componenten of binnen andere aangepaste hooks. Roep hooks niet aan in lussen, voorwaarden of geneste functies.
• Roep hooks alleen aan binnen React functionele componenten. Roep ze niet aan in gewone JavaScript-functies of in klassecomponenten.
• Het gebruik van useCallback voor het memoïseren van functies en useMemo voor het memoïseren van berekeningen helpt de prestaties te optimaliseren.
• Gebruik useEffect voor bijwerkingen (gegevens laden, abonnementen, enz.), met een afhankelijkheidsarray om de uitvoering van het effect te controleren.
• Houd de volgorde van het aanroepen van hooks bij elke rendering van het component. React vertrouwt op deze volgorde om de toestand en effecten correct te koppelen.
• Gebruik stabiele afhankelijkheden in de afhankelijkheidsarrays van useEffect, useCallback, useMemo. Geef geen objecten of functies door die bij elke rendering worden gemaakt zonder noodzaak.
• Maak aangepaste hooks om logica van de toestand tussen componenten te hergebruiken. De namen van aangepaste hooks moeten beginnen met use.

// Correct voorbeeld: hooks aanroepen op het hoogste niveau
function MyComponent() {
  const [count, setCount] = useState(0); // Op het hoogste niveau

  useEffect(() => { // Op het hoogste niveau
    document.title = `Je hebt ${count} keer geklikt`;
  }, [count]); // Afhankelijkheidsarray

  const handleClick = useCallback(() => { // Op het hoogste niveau
    setCount(c => c + 1);
  }, []); // Gepromoteerde functie

  return (
    <div>
      <p>Je hebt {count} keer geklikt</p>
      <button onClick={handleClick}>
        Klik mij
      </button>
    </div>
  );
}

// Fout voorbeeld: hook aanroepen in een conditie
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // ONJUIST: aanroep in conditie
//   }
//   // ...
// }

// Fout voorbeeld: hook aanroepen in een lus
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // ONJUIST: aanroep in lus
//   }
//   // ...
// }