Asynkrone forslag med debounce

I stedet for å filtrere en lokal matrise kaller du et API-endepunkt som returnerer samsvarende forslag basert på spørringen. API-kallet legges i en useEffect som avhenger av den debouncete inndataverdien. Dette flytter ansvaret for filtreringen til serveren og muliggjør fuzzy matching, rangering og forslag fra et langt større datasett.

Legg til to nye state-variabler i autocomplete-komponenten: isLoading (boolean) for å vise en spinner mens hentingen pågår, og error (string eller null) for å vise en feilmelding når hentingen mislykkes. Disse gir brukerne tilbakemelding om den asynkrone operasjonen i stedet for å la dem lure på hvorfor forslagene ikke vises.

I fetch-useEffect-en setter du setIsLoading(true) og setError(null) i starten. Deretter kaller du fetch(url), tolker JSON-dataene, kaller setSuggestions(data) og setter til slutt setIsLoading(false) i en finally-blokk eller etter både suksess- og feilforløpet. Effektens avhengighetsmatrise inneholder bare debouncedInputValue.

Opprett en ny AbortController øverst i effekten, og send controller.signal med i fetch-alternativene. Kall controller.abort() i oppryddingsfunksjonen. Når brukeren skriver og den debouncete verdien endres, avbrytes den forrige hentingen før den nye starter. Dermed forhindrer du at foreldede resultater kommer i feil rekkefølge.

Når en fetch avbrytes, avvises den med en DOMException med navnet AbortError. I catch-blokken kontrollerer du if (err.name === 'AbortError') return; for å ignorere avbrutte hentinger uten å vise en melding. Håndter bare reelle nettverks- eller API-feil som bør vises til brukeren.

Sett isLoading til true før hentingen og til false etter at den er fullført eller har feilet. Bruk en finally-blokk for å sikre at verdien alltid tilbakestilles: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Uten finally-blokken ville en hente-feil ført til at spinneren fortsatte å kjøre for alltid.

Når isLoading er true og inputfeltet inneholder tekst, viser du nedtrekkslisten med en sentrert spinner i stedet for forslagslisten. Dette forteller brukeren at resultatene er på vei. Når innlastingen er ferdig og forslagene er kommet, bytter du ut spinneren med de faktiske forslagene.

Når error ikke er null, viser du nedtrekkslisten med feilmeldingen i stedet for forslagene. En melding som "Kunne ikke laste inn forslag. Prøv på nytt." er mer brukervennlig enn en rå feilmelding. Du kan eventuelt legge til en knapp for å prøve på nytt, som starter hentingen manuelt.

Unngå å hente data for tomme strenger eller svært korte spørringer som gir for mange irrelevante resultater. Legg inn en kontroll i starten av effekten: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Dette reduserer unødvendige API-kall og hindrer en overveldende resultatliste fra ett enkelt tegn.

Lag­re hentede resultater i et Map-objekt i en useRef: const cache = useRef(new Map()). Før du henter data, kontrollerer du if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Lagre resultatet etter en vellykket henting. Dette eliminerer overflødige nettverksforespørsler for spørringer brukeren allerede har skrevet.

For autocomplete er en debounce-forsinkelse på 200–300 ms det beste kompromisset. Kortere forsinkelser (under 200 ms) utløser for mange forespørsler for brukere som skriver raskt. Lengre forsinkelser (over 400 ms) får forslagene til å virke trege og lite responsive. 250ms er en vanlig standardverdi i produksjonsimplementasjoner av autocomplete.

Bytt ut statisk filtrering med en API-henting i en useEffect som avhenger av den debouncete verdien. Bruk AbortController til å avbryte foreldede forespørsler. Legg til isLoading- og error-state for å gi brukeren tilbakemelding. Sett en minimumsgrense for antall tegn for å unngå for mange kall. Bufre resultatene i en ref for å hoppe over overflødige nettverksforespørsler.