Einen benutzerdefinierten useThrottle-Hook implementieren

Debounce setzt bei jedem Ereignis einfach einen Timer zurück. Throttle muss aktiv verfolgen, wann die letzte Ausführung stattgefunden hat, und entscheiden, ob für eine weitere Ausführung genügend Zeit vergangen ist. Dafür muss ein Zeitstempel über mehrere Renderzyklen hinweg erhalten bleiben, wodurch die Implementierung etwas aufwendiger als bei Debounce wird.

Der Zeitstempel der letzten Ausführung muss über mehrere Renderzyklen hinweg erhalten bleiben, ohne selbst Neurenderings auszulösen. Daher ist useRef das geeignete Werkzeug. Speichern Sie den Zeitstempel als const lastRunTime = useRef(Date.now()). Anders als eine State-Aktualisierung löst die Aktualisierung einer Ref kein Neurendering aus. So läuft die Throttle-Logik effizient und ohne zusätzliche Zyklen.

Der useThrottle(value, delay)-Hook gibt eine per Throttle begrenzte Version des Eingabewerts zurück. Sein Vertrag ähnelt dem von useDebounce: Er akzeptiert einen beliebigen Wert und eine Verzögerung in ms und gibt den begrenzten Wert zurück. Komponenten verwenden ihn auf dieselbe Weise, sodass er sich als direkte Alternative für andere Timing-Semantiken einsetzen lässt.

Ein Trailing-Edge-Throttle aktualisiert den Wert am Ende jedes Intervalls. Wenn ein neuer Wert eintrifft, planen Sie ein setTimeout für die verbleibende Intervallzeit ein: delay - (Date.now() - lastRunTime.current). Wenn der Timer ausgelöst wird, aktualisieren Sie den State und speichern den neuen Wert in lastRunTime. Brechen Sie vorherige Timer im Cleanup ab.

Ein Leading-Edge-Throttle wendet den ersten Wert sofort an und ignoriert nachfolgende Werte, bis das Intervall abgelaufen ist. Prüfen Sie: Wenn Date.now() - lastRunTime.current >= delay gilt, aktualisieren Sie den State und speichern den Zeitpunkt. Andernfalls überspringen Sie die Aktualisierung. So erhalten Sie sofortiges Feedback bei der ersten Aktion und anschließend eine Abkühlphase.

Die beste UX kombiniert häufig beides: Reagieren Sie sofort auf das erste Ereignis (Leading Edge) und stellen Sie anschließend sicher, dass nach dem Intervall auch der endgültige State angewendet wird (Trailing Edge). So sieht der Benutzer zunächst eine schnelle Reaktion, und der endgültige Wert wird immer angewendet, nachdem die Bewegung beendet ist. Dadurch wird ein veralteter Endzustand verhindert.

Speichern Sie die ID des ausstehenden Timeouts in einem useRef: const timeoutRef = useRef(null). Rufen Sie vor dem Planen eines neuen Timeouts clearTimeout(timeoutRef.current) auf, um ein eventuell vorhandenes Timeout abzubrechen. So verhindern Sie mehrere überlappende Timer, die mehrere Aktualisierungen innerhalb eines einzelnen Throttle-Intervalls auslösen würden.

Das Cleanup von useEffect sollte clearTimeout(timeoutRef.current) aufrufen, um eine ausstehende Aktualisierung am Trailing Edge abzubrechen, wenn die Komponente unmounted wird. Andernfalls wird ein ausstehendes Timeout nach dem Unmount ausgelöst und versucht, den State einer nicht mehr gemounteten Komponente zu setzen, was möglicherweise React-Warnungen verursacht.

Statt eines wertbasierten Hooks können Sie einen auf useCallback basierenden Throttle-Hook erstellen: useThrottledCallback(fn, delay) gibt eine gedrosselte Version einer Funktion zurück. Das ist flexibler, wenn die zu drosselnde Operation ein Funktionsaufruf ist, etwa bei einem Analytics-Tracker, und kein reaktiver Wert.

Verwenden Sie in Jest-Tests jest.useFakeTimers(), um die Zeit zu steuern. Richten Sie ein Throttling mit einer Verzögerung von 1000 ms ein, lösen Sie 10 schnelle Wertänderungen aus, rücken Sie die simulierte Zeit dann um 500 ms vor und prüfen Sie, ob nur 1 oder 2 Aktualisierungen erfolgt sind. Rücken Sie die Zeit um weitere 500 ms vor und verifizieren Sie, dass die Aktualisierung am Trailing Edge ausgelöst wird. So lässt sich das Verhalten des Throttlings deterministisch überprüfen.

React verarbeitet State-Updates während des Renderns in Batches. Ein auf State-Updates arbeitendes Throttling passt sauber in dieses Modell. Beachten Sie jedoch, dass Render-Vorgänge im Concurrent Mode von React 18 unterbrochen werden können. Die Throttling-Logik selbst, die auf der tatsächlichen Zeit über Date.now() basiert, bleibt von der React-Planung unberührt.

An welchem Rand wird ein „Trailing“-Throttle ausgelöst?

Für Throttling müssen Sie mit useRef den Zeitpunkt der letzten Ausführung verfolgen. Der Hook kann den Leading Edge (sofort), den Trailing Edge (verzögert) oder beides implementieren. Speichern Sie die Timeout-ID immer in einem Ref und brechen Sie sie im Cleanup ab. Für funktionsbasierte Anwendungsfälle empfiehlt sich das Muster useThrottledCallback. Testen Sie mit Fake-Timern, um zuverlässige Ergebnisse zu erhalten.