Praktische Anwendungen: Suche, Scrollen, Größenänderung

Verwalten Sie in einer Live-Suchkomponente zwei getrennte Zustandsvariablen: inputValue für die rohe Eingabe (wird bei jedem Tastendruck aktualisiert und hält das Eingabefeld reaktionsfähig) und debouncedQuery aus useDebounce(inputValue, 300) (wird 300 ms nach dem Ende der Eingabe aktualisiert und löst den API-Aufruf aus). Diese Trennung sorgt für sofortige visuelle Rückmeldung, ohne übermäßig viele Anfragen zu senden.

Zeigen Sie einen Ladeindikator an, sobald die Benutzerin oder der Benutzer mit der Eingabe beginnt, nicht erst beim Start des API-Aufrufs. Setzen Sie isLoading: true, sobald inputValue !== debouncedQuery gilt – während die Debounce-Verzögerung noch läuft, sind die beiden Werte nicht synchron. Sobald sich die Abfrage stabilisiert hat und der Abruf abgeschlossen ist, setzen Sie den Wert wieder auf false. So sehen die Benutzerinnen und Benutzer durchgehend einen reaktionsfähigen Ladeindikator.

Ein Parallax-Effekt oder eine Lesefortschrittsleiste wird anhand der Scrollposition aktualisiert. Begrenzen Sie den Scroll-Handler mit einer Verzögerung von 16 ms auf höchstens 60 fps: const throttledScrollY = useThrottle(scrollY, 16). Die Benutzeroberfläche wird flüssig aktualisiert, ohne die Position bei jedem einzelnen Scroll-Pixel neu berechnen zu müssen.

Das Abhören der Fenstergrößenänderung zur Neuberechnung des Layouts sollte mit Debounce und nicht mit Throttle erfolgen. Die Layoutberechnung muss nur einmal ausgeführt werden, nachdem die Benutzerin oder der Benutzer die Größenänderung beendet hat. Verwenden Sie für die Fensterabmessungen eine Debounce-Zeit von 200 ms. Während des Ziehens kann die Benutzeroberfläche einen vereinfachten Zustand anzeigen; das neu berechnete Layout erscheint, sobald die Größenänderung beendet ist.

Wenn sich debouncedQuery ändert, erstellen Sie einen neuen AbortController und übergeben dessen signal an fetch(url, { signal }). Geben Sie eine Cleanup-Funktion zurück, die controller.abort() aufruft. Dadurch wird eine laufende Anfrage für eine vorherige Abfrage abgebrochen, sobald eine neue verzögerte Abfrage eintrifft. So verhindern Sie Race Conditions, bei denen eine langsame frühere Antwort eine schnellere spätere Antwort überschreibt.

Ohne AbortController kann die zweite Abfrage früher als die erste zurückkehren, wenn die Benutzerin oder der Benutzer „re“ eingibt, wartet und anschließend „react“ eingibt (etwa aufgrund des Cachings). Die Suchergebnisse würden kurz die Ergebnisse für React anzeigen und anschließend durch die veralteten Ergebnisse für „re“ überschrieben werden. AbortController verhindert dies, indem die frühere Anfrage vollständig abgebrochen wird.

Das Dropdown kombiniert Debounce für API-Aufrufe mit einem sofortigen Zustand für die Anzeige der Eingabe. inputValue steuert, was im Textfeld angezeigt wird. useDebounce(inputValue, 250) steuert, wann der Abruf der Vorschläge ausgelöst wird. Die Vorschlagsliste wird aus dem Zustand der abgerufenen Ergebnisse gerendert, der von beiden Eingabezuständen getrennt ist.

Asynchrone Formularvalidierung, etwa die Prüfung, ob eine E-Mail-Adresse bereits vorhanden ist, sollte mit Debounce ausgeführt werden, damit der Server nicht bei jedem Tastendruck mit Anfragen belastet wird. Verwenden Sie für den Feldwert eine Debounce-Zeit von 400 ms und lösen Sie die Validierungsanfrage in einem useEffect aus, der vom verzögerten Wert abhängt. Zeigen Sie im Feld einen Ladeindikator an, solange die Validierung aussteht.

Debounce eignet sich hervorragend, um Formularinhalte während der Eingabe automatisch zu speichern. Verwenden Sie für das Formularwerteobjekt eine Debounce-Zeit von 1000 ms. Sobald sich der verzögerte Wert ändert, lösen Sie einen Speichervorgang in localStorage oder an einem API-Endpunkt aus. Während die Debounce-Verzögerung läuft, sieht die Benutzerin oder der Benutzer den Hinweis „Wird gespeichert...“ und nach Abschluss der Anfrage „Gespeichert“.

Verzögerungswerte sind Entscheidungen zur Benutzererfahrung. Bei der Suche bieten 200–300 ms ein gutes Gleichgewicht zwischen Reaktionsfähigkeit und weniger Anfragen. Beim Ändern der Fenstergröße sind 150–200 ms akzeptabel, da Benutzerinnen und Benutzer erwarten, dass sich das Layout nach der Größenänderung stabilisiert. Beim automatischen Speichern geben 1000 ms ausreichend Zeit, einen Satz einzugeben, bevor gespeichert wird. Passen Sie die Verzögerung an die erwartete Geschwindigkeit der Interaktion an.

In realen Anwendungen müssen oft mehrere Optimierungen gleichzeitig eingesetzt werden. Ein Dokumenteditor könnte das automatische Speichern mit Debounce (1 s), die Berechnung der Wortanzahl mit Throttle (500 ms) und IntersectionObserver für Analysen verwenden. Diese Techniken lassen sich gut kombinieren, da jede unabhängig mit ihrem eigenen Timer und Gültigkeitsbereich arbeitet.

Warum sollten Sie AbortController zusammen mit einer per Debounce verzögerten Suchabfrage verwenden?

Verwenden Sie useDebounce für Sucheingaben, Größenänderungs-Handler und das automatische Speichern von Formularen. Verwenden Sie useThrottle für Scroll- und Mausbewegungen. Kombinieren Sie verzögerte API-Aufrufe immer mit AbortController, um Race Conditions zu verhindern. Zeigen Sie einen Ladezustand an, sobald inputValue !== debouncedQuery gilt, damit die Benutzeroberfläche reaktionsfähig bleibt und den aktuellen Status vermittelt.