Asynchrone Vorschläge mit Debounce

Filtern Sie nicht länger ein lokales Array, sondern rufen Sie einen API-Endpunkt auf, der anhand der Abfrage passende Vorschläge zurückgibt. Der API-Aufruf gehört in einen useEffect, der vom entprellten Eingabewert abhängt. Dadurch wird die Verantwortung für das Filtern auf den Server verlagert, was Fuzzy Matching, Ranking und Vorschläge aus einem deutlich größeren Datensatz ermöglicht.

Fügen Sie dem Autocomplete zwei neue State-Variablen hinzu: isLoading (boolean), um während des Fetch-Vorgangs einen Ladeindikator anzuzeigen, und error (string oder null), um bei einem fehlgeschlagenen Fetch eine Fehlermeldung darzustellen. So erhalten Benutzer Feedback zum asynchronen Vorgang, statt sich zu fragen, warum keine Vorschläge erscheinen.

Setzen Sie im Fetch-useEffect zu Beginn setIsLoading(true) und setError(null), rufen Sie anschließend fetch(url) auf, verarbeiten Sie das JSON, rufen Sie setSuggestions(data) auf und setzen Sie setIsLoading(false) schließlich in einem finally-Block oder nach beiden Pfaden für Erfolg und Fehler. Das Abhängigkeits-Array des Effekts enthält ausschließlich debouncedInputValue.

Erstellen Sie am Anfang des Effekts einen neuen AbortController und übergeben Sie controller.signal an die Fetch-Optionen. Rufen Sie in der Bereinigungsfunktion controller.abort() auf. Wenn der Benutzer Text eingibt und sich der entprellte Wert ändert, wird der vorherige Fetch abgebrochen, bevor der neue beginnt. So verhindern Sie, dass veraltete Ergebnisse in der falschen Reihenfolge eintreffen.

Wenn ein Fetch abgebrochen wird, wird er mit einer DOMException zurückgewiesen, deren Name AbortError lautet. Prüfen Sie im catch-Block if (err.name === 'AbortError') return;, um abgebrochene Fetches stillschweigend zu ignorieren. Behandeln Sie nur echte Netzwerk- oder API-Fehler, die dem Benutzer angezeigt werden sollten.

Setzen Sie isLoading vor dem Fetch auf true und nach dessen erfolgreichem Abschluss oder Fehlschlagen auf false. Verwenden Sie einen finally-Block, damit der Status immer zurückgesetzt wird: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Ohne den finally-Block würde ein Fetch-Fehler den Ladeindikator dauerhaft anzeigen.

Wenn isLoading true ist und das Eingabefeld Text enthält, zeigen Sie das Dropdown mit einem zentrierten Ladeindikator anstelle der Vorschlagsliste an. So wissen Benutzer, dass die Ergebnisse geladen werden. Sobald der Ladevorgang beendet ist und Vorschläge eingetroffen sind, ersetzen Sie den Ladeindikator durch die tatsächlichen Vorschlagselemente.

Wenn error nicht null ist, zeigen Sie das Dropdown mit der Fehlermeldung anstelle der Vorschläge an. Eine Meldung wie "Vorschläge konnten nicht geladen werden. Bitte versuchen Sie es erneut." ist freundlicher als eine unveränderte Fehlermeldung. Optional können Sie eine Schaltfläche zum erneuten Versuch hinzufügen, die den Fetch manuell erneut ausführt.

Vermeiden Sie Fetches für leere Zeichenfolgen oder sehr kurze Abfragen, die zu viele irrelevante Ergebnisse liefern. Sichern Sie den Anfang des Effekts ab: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Dadurch reduzieren Sie unnötige API-Aufrufe und verhindern, dass ein einzelnes Zeichen eine überwältigende Ergebnisliste erzeugt.

Speichern Sie geladene Ergebnisse in einer useRef-Map: const cache = useRef(new Map()). Prüfen Sie vor dem Fetch if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Speichern Sie das Ergebnis nach einem erfolgreichen Fetch. So vermeiden Sie wiederholte Netzwerkanfragen für Abfragen, die der Benutzer bereits eingegeben hat.

Für Autocomplete ist eine Debounce-Verzögerung von 200–300 ms optimal. Kürzere Verzögerungen (unter 200 ms) lösen bei Benutzern, die schnell tippen, zu viele Anfragen aus. Längere Verzögerungen (über 400 ms) lassen die Vorschläge träge und un responsiv wirken. 250 ms ist ein häufig verwendeter Standardwert in produktiven Autocomplete-Implementierungen.

Warum ist AbortController in einem Autocomplete mit Debounce, das Daten von einer API abruft, wichtig?

Ersetzen Sie das statische Filtern durch einen API-Fetch innerhalb eines useEffect, der vom entprellten Wert abhängt. Verwenden Sie AbortController, um veraltete Anfragen abzubrechen. Fügen Sie isLoading- und error-Status für Feedback an die Benutzer hinzu. Legen Sie eine Mindestanzahl an Zeichen fest, um übermäßige Aufrufe zu vermeiden. Speichern Sie Ergebnisse in einer Ref zwischen, um redundante Netzwerkanfragen zu überspringen.