Implementowanie własnego hooka useThrottle

Debounce po prostu resetuje timer przy każdym zdarzeniu. Throttle musi aktywnie śledzić, kiedy nastąpiło ostatnie wykonanie, i ustalać, czy upłynęło wystarczająco dużo czasu, aby wykonać funkcję ponownie. Wymaga to zachowania znacznika czasu między renderowaniami, dlatego implementacja jest nieco bardziej złożona niż w przypadku debounce.

Znacznik czasu ostatniego wykonania musi być zachowywany między renderowaniami bez wywoływania ponownych renderowań, dlatego właściwym narzędziem jest useRef. Należy przechowywać znacznik czasu jako const lastRunTime = useRef(Date.now()). W przeciwieństwie do stanu aktualizacja refa nie powoduje ponownego renderowania, więc logika throttle działa wydajnie, bez dodatkowych cykli.

Hook useThrottle(value, delay) zwraca wersję wartości wejściowej przetwarzaną za pomocą throttle. Jego kontrakt jest podobny do useDebounce: przyjmuje dowolną wartość i opóźnienie w ms, a zwraca wartość objętą throttle. Komponenty używają go w taki sam sposób, dzięki czemu może on być bezpośrednim zamiennikiem w przypadku innych zasad określania czasu.

Throttle typu trailing edge aktualizuje wartość na końcu każdego interwału. Gdy nadejdzie nowa wartość, należy zaplanować setTimeout na czas pozostały do końca interwału: delay - (Date.now() - lastRunTime.current). Gdy timer się uruchomi, należy zaktualizować stan i zapisać nową wartość lastRunTime. W funkcji cleanup należy anulować poprzednie timery.

Throttle typu leading edge natychmiast stosuje pierwszą wartość, a kolejne ignoruje do wygaśnięcia interwału. Należy sprawdzić, czy Date.now() - lastRunTime.current >= delay, a następnie zaktualizować stan i zapisać czas. W przeciwnym razie aktualizację należy pominąć. Zapewnia to natychmiastową reakcję na pierwsze działanie oraz następujący po nim okres oczekiwania.

Najlepszy UX często łączy oba podejścia: natychmiastową reakcję na pierwsze zdarzenie (leading), a następnie zastosowanie końcowego stanu po upływie interwału (trailing). Dzięki temu użytkownik widzi szybką początkową reakcję, a końcowa wartość zawsze zostaje zastosowana po zakończeniu ruchu, co zapobiega pozostawieniu nieaktualnego stanu końcowego.

Oczekujący identyfikator timeoutu należy przechowywać w useRef: const timeoutRef = useRef(null). Przed zaplanowaniem nowego timeoutu należy wywołać clearTimeout(timeoutRef.current), aby anulować istniejący. Zapobiega to nakładaniu się wielu timerów, które powodowałyby wielokrotne aktualizacje w ramach jednego interwału throttle.

Funkcja cleanup w useEffect powinna wywoływać clearTimeout(timeoutRef.current), aby anulować oczekującą aktualizację trailing podczas odmontowywania komponentu. Bez tego oczekujący timeout uruchomi się po odmontowaniu i spróbuje ustawić stan w odmontowanym komponencie, co może powodować ostrzeżenia Reacta.

Zamiast hooka opartego na wartości można utworzyć hook throttle oparty na useCallback: useThrottledCallback(fn, delay) zwraca throttlowaną wersję funkcji. Jest to bardziej elastyczne rozwiązanie, gdy throttlowana operacja jest wywołaniem funkcji, na przykład trackera analitycznego, a nie wartością reaktywną.

W testach Jest należy użyć jest.useFakeTimers(), aby kontrolować czas. Należy skonfigurować throttle z opóźnieniem 1000 ms, wywołać 10 szybkich zmian wartości, następnie przesunąć fałszywy czas o 500 ms i sprawdzić, czy nastąpiła tylko 1 lub 2 aktualizacje. Po przesunięciu czasu o kolejne 500 ms należy zweryfikować, czy uruchomiła się aktualizacja trailing. Pozwala to deterministycznie sprawdzić działanie throttle.

React przetwarza aktualizacje stanu partiami podczas renderowania. Throttle działający na aktualizacjach stanu dobrze współpracuje z tym modelem. Należy jednak pamiętać, że w React 18 Concurrent Mode renderowanie może zostać przerwane. Sama logika throttle, oparta na rzeczywistym czasie zegarowym za pośrednictwem Date.now(), nie zależy od sposobu planowania renderowania przez React.

Na której krawędzi uruchamia się throttle typu „trailing”?

Throttle wymaga śledzenia czasu ostatniego wykonania za pomocą useRef. Hook może implementować leading edge (natychmiastowe wykonanie), trailing edge (odroczone wykonanie) albo oba podejścia. Identyfikator timeoutu należy zawsze przechowywać w refie i anulować go w funkcji cleanup. W przypadkach opartych na funkcjach warto użyć wzorca useThrottledCallback. Dla niezawodności należy przeprowadzać testy z użyciem fałszywych timerów.