React HooksExplained

24 of 24 rows

Hook↕	Cosa fa↕	Usalo per↕
State
⤢useState	Contiene un singolo valore che genera un re-render quando cambia.	State locale del componente: campi di form, toggle, contatori.
⤢useReducer	Contiene uno state guidato da un reducer di action, come un piccolo store.	State con più campi correlati o transizioni complesse.
⤢useRef	Contiene un valore mutabile che NON genera un re-render.	Contenitori mutabili, timer e accesso diretto al DOM tramite .current.
Effect
⤢useEffect	Esegue un side effect dopo il render, con cleanup opzionale.	Recuperare dati, subscription e sincronizzarsi con un sistema esterno.
⤢Effect cleanup	La funzione restituita da un effect viene eseguita prima dell'effect successivo e di nuovo all'unmount.	Smontare subscription e timer, o interrompere una fetch in corso.
⤢useLayoutEffect	Come useEffect, ma scatta in modo sincrono dopo la mutazione del DOM.	Leggere o scrivere il layout prima che il browser disegni (toast, tooltip).
⤢useEffect vs handlers	Gli event handler girano in risposta a un'azione dell'utente; gli effect girano dopo il render per sincronizzare.	La logica causata dall'utente sta in un handler, quella causata dal render in un effect.
⤢StrictMode	In sviluppo monta i componenti due volte, così gli effect girano, si puliscono e girano di nuovo.	Scoprire subscription doppie e cleanup mancanti prima della produzione.
Prestazioni
⤢useMemo	Mette in cache un valore calcolato finché le sue dipendenze non cambiano.	Evitare ricalcoli costosi tra i render; cambia di proposito un valore nelle deps per invalidare la cache.
⤢useCallback	Mette in cache il riferimento a una funzione finché le sue dipendenze non cambiano.	Callback stabili passati a figli memoizzati o usati come deps.
⤢React.memo	Salta il re-render di un componente le cui props sono invariate.	Componenti figlio pesanti; passa una funzione di confronto come secondo argomento quando la shallow equality non basta (un HOC, non un hook).
Context e handle esterni
⤢useContext	Legge il valore di un context senza prop drilling.	Tema, locale o utente autenticato condivisi nell'albero.
⤢useImperativeHandle	Personalizza l'istanza che il parent vede tramite un ref.	Esporre un'API ristretta da un figlio tramite forwardRef.
Concorrenza e altro
⤢useTransition	Marca un aggiornamento di state come non urgente, così la UI resta reattiva.	Tenere l'input scattante mentre una lista pesante si ri-renderizza.
⤢useDeferredValue	Ritarda un valore così gli aggiornamenti possono essere interrotti.	Debounce di render costosi senza timer.
⤢useId	Genera un id univoco e stabile per gli attributi di accessibilità.	Collegare label e input tra render server e client.
⤢use()	Legge una promise o un context durante il render; l'unico hook che puoi chiamare in modo condizionale.	Scartare una promise con Suspense, o leggere un context dentro un early return.
⤢useActionState	Contiene uno state guidato da una form action, con flag pending incluso.	Submit di form che restituiscono errori o state aggiornato da mostrare inline.
⤢useOptimistic	Renderizza subito un valore ottimistico, poi torna allo state reale quando l'action si conclude.	Mostrare un like o un messaggio inviato mentre la richiesta al server è in volo.
⤢useFormStatus	Legge lo stato pending del <form> circostante, senza props.	Un pulsante di submit che si disabilita mentre il suo form genitore invia.
⤢useSyncExternalStore	Si sottoscrive a uno store esterno a React e legge uno snapshot coerente.	API del browser come lo stato online, o store di state di terze parti.
⤢useInsertionEffect	Gira prima dei layout effect, pensato per iniettare regole CSS-in-JS.	Librerie di stile che devono inserire regole prima che il layout venga letto.
⤢useDebugValue	Mostra un'etichetta personalizzata per lo state interno di un hook in React DevTools.	Etichettare ciò che contiene un custom hook durante il debug.
⤢Custom hooks (use*)	Un tuo hook che compone quelli built-in per condividere logica.	Comportamenti stateful riutilizzabili come useFetch o useMediaQuery.