Quelles sont les règles pour écrire des hooks dans React?

• Appeler les hooks uniquement au niveau supérieur des composants fonctionnels ou à l'intérieur d'autres hooks personnalisés. Il est interdit d'appeler des hooks dans des boucles, des conditions ou des fonctions imbriquées.
• Appeler les hooks uniquement à l'intérieur des composants fonctionnels React. Il est interdit de les appeler dans des fonctions JavaScript normales ou dans des composants de classe.
• L'utilisation de useCallback pour la mémorisation des fonctions et useMemo pour la mémorisation des calculs aide à optimiser les performances.
• Utiliser useEffect pour les effets secondaires (chargement de données, abonnements, etc.), en spécifiant un tableau de dépendances pour contrôler l'exécution de l'effet.
• Respecter l'ordre d'appel des hooks à chaque rendu du composant. React se fie à cet ordre pour lier correctement l'état et les effets.
• Utiliser des dépendances stables dans les tableaux de dépendances de useEffect, useCallback, useMemo. Ne pas passer d'objets ou de fonctions créés à chaque rendu sans nécessité.
• Créer des hooks personnalisés pour réutiliser la logique d'état entre les composants. Les noms des hooks personnalisés doivent commencer par use.

// Exemple correct : appel des hooks au niveau supérieur
function MyComponent() {
  const [count, setCount] = useState(0); // Au niveau supérieur

  useEffect(() => { // Au niveau supérieur
    document.title = `Vous avez cliqué ${count} fois`;
  }, [count]); // Tableau de dépendances

  const handleClick = useCallback(() => { // Au niveau supérieur
    setCount(c => c + 1);
  }, []); // Fonction mémoïsée

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={handleClick}>
        Clique-moi
      </button>
    </div>
  );
}

// Exemple incorrect : appel d'un hook dans une condition
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // INcorrect: appel dans une condition
//   }
//   // ...
// }

// Exemple incorrect : appel d'un hook dans une boucle
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // INcorrect: appel dans une boucle
//   }
//   // ...
// }