Implementare un custom hook useThrottle

Il debounce si limita a reimpostare un timer a ogni evento. Il throttle deve tenere attivamente traccia del momento dell'ultima esecuzione e stabilire se è trascorso tempo sufficiente per eseguirne un'altra. È necessario conservare un timestamp tra una renderizzazione e l'altra, rendendo l'implementazione leggermente più complessa rispetto al debounce.

Il timestamp dell'ultima esecuzione deve persistere tra le renderizzazioni senza provocare a sua volta nuove renderizzazioni, quindi useRef è lo strumento più adatto. Memorizzi il timestamp come const lastRunTime = useRef(Date.now()). A differenza dello stato, l'aggiornamento di un ref non provoca una nuova renderizzazione, perciò la logica del throttle viene eseguita in modo efficiente e senza cicli aggiuntivi.

L'hook useThrottle(value, delay) restituisce una versione con throttle del valore di input. Il suo contratto è simile a quello di useDebounce: accetta qualsiasi valore e un ritardo espresso in millisecondi e restituisce il valore con throttle. I componenti lo utilizzano nello stesso modo, rendendolo un'alternativa immediatamente utilizzabile per diverse semantiche temporali.

Un throttle trailing edge aggiorna il valore alla fine di ogni intervallo. Quando arriva un nuovo valore, si pianifica un setTimeout per il tempo rimanente dell'intervallo: delay - (Date.now() - lastRunTime.current). Quando il timer scatta, si aggiorna lo stato e si registra il nuovo lastRunTime. Si annullano i timer precedenti nella funzione di cleanup.

Un throttle leading edge applica immediatamente il primo valore e ignora quelli successivi finché l'intervallo non scade. Si verifica se Date.now() - lastRunTime.current >= delay: in tal caso, si aggiorna lo stato e si registra l'istante. In caso contrario, si salta l'aggiornamento. In questo modo si ottiene un feedback immediato alla prima azione, seguito da un periodo di cooldown.

La UX migliore spesso combina entrambi: rispondere immediatamente al primo evento (leading), quindi assicurarsi che anche lo stato finale venga applicato dopo l'intervallo (trailing). In questo modo l'utente vede una risposta iniziale rapida e il valore finale viene sempre applicato dopo che il movimento si è arrestato, evitando uno stato finale obsoleto.

Memorizzare l'ID del timeout in un useRef: const timeoutRef = useRef(null). Prima di pianificare un nuovo timeout, chiamare clearTimeout(timeoutRef.current) per annullare quello eventualmente esistente. In questo modo si impedisce la sovrapposizione di più timer, che causerebbe più aggiornamenti durante un singolo intervallo di throttle.

La funzione di cleanup di useEffect dovrebbe chiamare clearTimeout(timeoutRef.current) per annullare qualsiasi aggiornamento trailing in sospeso quando il componente viene smontato. In caso contrario, un timeout in sospeso scatta dopo lo smontaggio e tenta di aggiornare lo stato di un componente non montato, causando potenzialmente avvisi di React.

Invece di un hook basato sul valore, è possibile creare un hook basato su useCallback per il throttle: useThrottledCallback(fn, delay) restituisce una versione sottoposta a throttle di una funzione. È più flessibile quando l'operazione da sottoporre a throttle è una chiamata di funzione, come un tracker di analytics, anziché un valore reattivo.

Nei test Jest, usare jest.useFakeTimers() per controllare il tempo. Configurare un throttle con un ritardo di 1000 ms, generare 10 rapidi cambiamenti di valore, quindi far avanzare il tempo simulato di 500 ms e verificare che si siano verificati solo 1 o 2 aggiornamenti. Far avanzare di altri 500 ms e verificare che venga eseguito l'aggiornamento trailing. In questo modo si convalida il comportamento del throttle in modo deterministico.

React elabora gli aggiornamenti di stato in batch durante i rendering. Un throttle che opera sugli aggiornamenti di stato si integra in modo lineare con questo modello. Tuttavia, si noti che in React 18 Concurrent Mode i rendering possono essere interrotti. La logica del throttle, basata sul tempo dell'orologio reale tramite Date.now(), non è influenzata dalla pianificazione di React.

Il throttle richiede di tenere traccia dell'istante dell'ultima esecuzione con useRef. L'hook può implementare il leading edge (immediato), il trailing edge (differito) oppure entrambi. Memorizzare sempre l'ID del timeout in un ref e annullarlo nella funzione di cleanup. Per i casi d'uso basati su funzioni, preferire un approccio useThrottledCallback. Per una maggiore affidabilità, eseguire i test con timer simulati.