Gli hooks hanno rivoluzionato React. Niente più classi verbose, lifecycle methods confusi, this binding. Ma usarli bene richiede comprensione profonda.
useState: stato semplice
Per stato locale di un componente. Chiamate il setter con il nuovo valore, React re-renderizza. Semplice. Ma attenzione: lo stato è asincrono. Leggere il valore subito dopo averlo settato restituisce il vecchio valore.
Per stato complesso, considerate useReducer. Più verboso ma più prevedibile per logica articolata.
useEffect: effetti collaterali
Fetch di dati, subscription a eventi, manipolazione DOM. Tutto ciò che non è puro rendering va in useEffect. L'array di dipendenze controlla quando l'effetto viene rieseguito.
Errore comune: dipendenze mancanti. ESLint vi avvisa, non ignorate quei warning.
useContext: stato globale leggero
Per condividere dati tra componenti senza prop drilling. Perfetto per tema, utente autenticato, preferenze. Per stato complesso con logica asincrona, considerate librerie dedicate come Zustand o Jotai.
Custom hooks: il vero potere
Gli hooks custom permettono di estrarre logica riutilizzabile. Un useAuth che gestisce login/logout. Un useFetch che wrappa le chiamate API. Il pattern è potente e mantiene i componenti puliti.