Einen benutzerdefinierten useDebounce-Hook implementieren

Der useDebounce-Hook akzeptiert einen Wert und eine Verzögerung in Millisekunden und gibt eine debouncte Version dieses Werts zurück: function useDebounce(value, delay). Der zurückgegebene Wert debouncedValue bleibt hinter dem tatsächlichen Wert zurück und wird erst aktualisiert, wenn die angegebene Verzögerung ohne eine weitere Änderung verstrichen ist.

Definieren Sie innerhalb des Hooks eine State-Variable: const [debouncedValue, setDebouncedValue] = useState(value). Dieser State enthält den zuletzt übernommenen Wert. Er ist anfangs gleich dem Ausgangswert und wird erst aktualisiert, wenn der Debounce-Timer ausgelöst wird. Komponenten, die debouncedValue auslesen, erhalten eine stabile, abgeschlossene Eingabe.

Die zentrale Logik befindet sich in einem useEffect: Erstellen Sie mit setTimeout(() => setDebouncedValue(value), delay) einen Timer und speichern Sie dessen ID. Der Effekt wird jedes Mal ausgeführt, wenn sich value oder delay ändert. Der Timer wird delay Millisekunden nach der letzten Änderung ausgelöst und aktualisiert den Debounce-State.

Die Bereinigungsfunktion von useEffect ruft clearTimeout(timerId) auf. Wenn sich value ändert, bevor der Timer ausgelöst wird, führt React die Bereinigung aus und bricht die ausstehende Aktualisierung ab. Anschließend wird ein neuer Timer geplant. Das ist der entscheidende Mechanismus hinter Debounce: Schnelle Änderungen setzen den Timer immer wieder zurück.

Das Abhängigkeitsarray von useEffect sollte [value, delay] enthalten. Der Effekt wird erneut ausgeführt, sobald sich der Eingabewert ändert (damit ein neuer Timer geplant wird) oder sich die Verzögerung ändert (falls der Aufrufer das Debounce-Intervall dynamisch anpasst). Beide Werte müssen enthalten sein, um Probleme mit veralteten Closures zu vermeiden.

Die Verwendung ist unkompliziert: const debouncedSearch = useDebounce(searchInput, 300). Ein separater useEffect mit [debouncedSearch] als Abhängigkeit führt den API-Aufruf aus. Der Eingabe-State (searchInput) wird sofort aktualisiert, sodass das Eingabefeld reaktionsfähig bleibt; nur der API-Aufruf wartet auf den Debounce.

Standardmäßig wird die übliche Implementierung nur am Trailing Edge ausgeführt. Für einen „sofortigen“ Modus, der die Funktion beim ersten Trigger aufruft, nachfolgende Aufrufe aber per Debounce begrenzt, benötigen Sie eine Ref, um zu verfolgen, ob der Aufruf bereits erfolgt ist, und sie nach dem Timeout zurückzusetzen. Das ist komplexer, aber für Absende-Schaltflächen nützlich.

Gestalten Sie den Hook typsicher und generisch: function useDebounce(value: T, delay: number): T. Dadurch kann TypeScript den Typ von debouncedValue aus dem Typ von value ableiten. Der generische Parameter T wird automatisch durch den internen State und den Rückgabetyp weitergereicht.

Ein häufiger Fehler besteht darin, die Bereinigungsfunktion nicht aus dem useEffect zurückzugeben. Ohne Bereinigung erzeugt jede Änderung des Werts einen neuen Timer, ohne den alten abzubrechen. Dadurch werden mehrere Timer ausgelöst und setDebouncedValue wird mehrfach mit veralteten Werten aufgerufen – der Debounce-Effekt wird vollständig aufgehoben.

Eine Alternative besteht darin, die Debounce-Funktion selbst mithilfe von Lodash in einer useRef zu speichern. Anders als der zustandsbasierte Ansatz begrenzt der Ref-Ansatz Callbacks (Funktionen) und keine Werte per Debounce. Verwenden Sie den zustandsbasierten Hook, wenn Sie einen abgeleiteten Wert benötigen, und den Callback-Ansatz, wenn Sie einen Event-Handler per Debounce begrenzen möchten.

Überprüfen Sie die Funktionsweise Ihres Hooks, indem Sie innerhalb des Timeout-Callbacks eine Konsolenausgabe ergänzen und beim schnellen Tippen die Browserkonsole beobachten. Sie sollten eine Ausgabe pro „Stopp“-Ereignis sehen, nicht eine pro Tastendruck. Beim schnellen Tippen sollte die Anzahl der Ausgaben deutlich geringer sein als die Anzahl der Tastendrücke.

Warum muss der useEffect in useDebounce eine Bereinigungsfunktion zurückgeben, die clearTimeout aufruft?

Der useDebounce(value, delay)-Hook enthält einen Debounce-State, der erst nach delay ms ohne Eingabe aktualisiert wird. Sein useEffect setzt einen Timeout und löscht ihn bei der Bereinigung, um veraltete Timer abzubrechen. Verwenden Sie den debouncten Wert als Abhängigkeit für Effekte, die API-Daten abrufen. Ergänzen Sie einen generischen TypeScript-Typ für vollständige Typsicherheit.