Implementare un custom hook useDebounce

L'hook useDebounce accetta un valore e un ritardo espresso in millisecondi e restituisce una versione con debounce di quel valore: function useDebounce(value, delay). Il debouncedValue restituito rimane indietro rispetto al valore reale e viene aggiornato solo dopo che è trascorso il ritardo specificato senza ulteriori modifiche.

All'interno dell'hook, dichiari una variabile di stato: const [debouncedValue, setDebouncedValue] = useState(value). Questo stato contiene l'ultimo valore confermato. Inizia con lo stesso valore iniziale e viene aggiornato solo dopo l'attivazione del timer del debounce. I componenti che leggono debouncedValue ricevono un input stabile e consolidato.

La logica principale risiede in un useEffect: crei un timer con setTimeout(() => setDebouncedValue(value), delay) e ne memorizzi l'ID. L'effetto viene eseguito ogni volta che cambiano value o delay. Il timer scatta delay millisecondi dopo l'ultima modifica e aggiorna lo stato con debounce.

La funzione di pulizia di useEffect chiama clearTimeout(timerId). Quando value cambia prima che il timer scatti, React esegue la pulizia annullando l'aggiornamento in attesa. Viene quindi pianificato un nuovo timer. Questo è il meccanismo fondamentale alla base del debounce: le modifiche rapide continuano a reimpostare il timer.

L'array delle dipendenze di useEffect dovrebbe contenere [value, delay]. L'effetto viene eseguito nuovamente ogni volta che cambia il valore di input, così da pianificare un nuovo timer, e ogni volta che cambia il ritardo, nel caso in cui il chiamante modifichi dinamicamente l'intervallo del debounce. È necessario includerli entrambi per evitare problemi causati da closure obsolete.

L'utilizzo è semplice: const debouncedSearch = useDebounce(searchInput, 300). Un useEffect separato, con [debouncedSearch] come dipendenza, effettua la chiamata API. Lo stato di input (searchInput) viene aggiornato immediatamente, mantenendo reattivo il campo; solo la chiamata API attende il debounce.

Per impostazione predefinita, l'implementazione standard viene eseguita solo sul trailing edge. Per una modalità "immediata", che chiami la funzione al primo trigger ma applichi il debounce alle chiamate successive, è necessario un ref per tenere traccia dell'avvenuta chiamata e reimpostarlo dopo il timeout. È più complesso, ma utile per i pulsanti di invio.

Renda l'hook generico per garantire la sicurezza dei tipi: function useDebounce(value: T, delay: number): T. In questo modo TypeScript può dedurre il tipo di debouncedValue dal tipo di value. Il parametro generico T viene propagato automaticamente attraverso lo stato interno e il tipo restituito.

Un errore frequente consiste nel dimenticare di restituire la funzione di pulizia da useEffect. Senza la pulizia, ogni modifica del valore crea un nuovo timer, ma non annulla mai quello precedente. Di conseguenza, vengono attivati più timer e setDebouncedValue viene chiamato più volte con valori obsoleti, annullando di fatto il debounce.

Un'alternativa consiste nel memorizzare la funzione di debounce in un useRef utilizzando lodash. A differenza dell'approccio basato sullo stato, quello basato sul ref applica il debounce alle callback (funzioni) anziché ai valori. Utilizzi l'hook basato sullo stato quando le serve un valore derivato; utilizzi l'approccio basato sulla callback quando deve applicare il debounce a un gestore di eventi.

Verifichi il funzionamento dell'hook aggiungendo un log della console all'interno della callback del timeout e osservando la console del browser mentre digita rapidamente. Dovrebbe visualizzare un log ogni volta che smette di digitare, non uno per ogni pressione di un tasto. Durante la digitazione rapida, il numero di log dovrebbe essere molto inferiore al numero di pressioni dei tasti.

Perché useEffect in useDebounce deve restituire una funzione di pulizia che chiama clearTimeout?

L'hook useDebounce(value, delay) mantiene uno stato con debounce, aggiornato solo dopo delay ms di silenzio. Il suo useEffect imposta un timeout e lo cancella durante la pulizia per annullare i timer obsoleti. Utilizzi il valore con debounce come dipendenza degli effetti che recuperano dati dalle API. Aggiunga un generico TypeScript per garantire la completa sicurezza dei tipi.