React Hooks: guida ragionata

Stato e logica nei componenti funzione

Gli Hook hanno reso i componenti funzione di React capaci di gestire stato ed effetti, rendendo quasi superflue le classi. Usati bene rendono il codice piu conciso e riutilizzabile; usati male portano a bug sottili e render inutili.

useState

useState aggiunge uno stato locale al componente. Restituisce il valore corrente e una funzione per aggiornarlo, che provoca un nuovo render.

const [contatore, setContatore] = useState(0);
return <button onClick={() => setContatore(contatore + 1)}>{contatore}</button>;

useEffect

useEffect esegue effetti collaterali (fetch, subscription, timer) dopo il render. L'array di dipendenze controlla quando rieseguirlo; la funzione restituita serve per la pulizia.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Custom hook

La vera potenza degli Hook e l'estrazione di logica riutilizzabile in funzioni che iniziano per use. Un custom hook incapsula stato ed effetti e si condivide tra componenti.

function useLarghezza() {
  const [w, setW] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setW(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return w;
}

Le trappole comuni

Dichiarare gli Hook sempre al livello superiore (mai dentro condizioni o cicli) e curare l'array di dipendenze sono le regole che evitano la maggior parte dei bug. In MUSTNODE SRL usiamo i custom hook per mantenere i componenti React puliti e la logica testabile e condivisa.