Quali sono le regole per scrivere gli hook in React?

• Chiamare gli hook solo a livello superiore dei componenti funzionali o all'interno di altri hook personalizzati. Non chiamare gli hook in cicli, condizioni o funzioni annidate.
• Chiamare gli hook solo all'interno di componenti funzionali React. Non chiamarli in funzioni JavaScript normali o in componenti di classe.
• L'uso di useCallback per memorizzare funzioni e useMemo per memorizzare calcoli aiuta a ottimizzare le prestazioni.
• Usare useEffect per effetti collaterali (caricamento dati, sottoscrizioni, ecc.), specificando un array di dipendenze per controllare l'esecuzione dell'effetto.
• Mantenere l'ordine di chiamata degli hook ad ogni render del componente. React si basa su questo ordine per collegare correttamente lo stato e gli effetti.
• Usare dipendenze stabili negli array di dipendenze di useEffect, useCallback, useMemo. Non passare oggetti o funzioni create ad ogni render senza necessità.
• Creare hook personalizzati per riutilizzare la logica dello stato tra i componenti. I nomi degli hook personalizzati devono iniziare con use.

// Esempio corretto: chiamare gli hook a livello superiore
function MyComponent() {
  const [count, setCount] = useState(0); // A livello superiore

  useEffect(() => { // A livello superiore
    document.title = `Hai cliccato ${count} volte`;
  }, [count]); // Array di dipendenze

  const handleClick = useCallback(() => { // A livello superiore
    setCount(c => c + 1);
  }, []); // Funzione memorizzata

  return (
    <div>
      <p>Hai cliccato {count} volte</p>
      <button onClick={handleClick}>
        Cliccami
      </button>
    </div>
  );
}

// Esempio sbagliato: chiamare un hook in una condizione
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // INCORRETTO: chiamata in condizione
//   }
//   // ...
// }

// Esempio sbagliato: chiamare un hook in un ciclo
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // INCORRETTO: chiamata in ciclo
//   }
//   // ...
// }