Asynchrone suggesties met debounce

In plaats van een lokale array te filteren, roep je een API-eindpunt aan dat overeenkomende suggesties retourneert op basis van de zoekopdracht. De API-aanroep komt in een useEffect die afhankelijk is van de invoerwaarde na debouncing. Hierdoor verschuift de verantwoordelijkheid voor het filteren naar de server, waardoor benaderend zoeken, rangschikken en suggesties uit een veel grotere gegevensverzameling mogelijk worden.

Voeg twee nieuwe statusvariabelen toe aan het automatisch aanvullen: isLoading (boolean) om tijdens het ophalen een laadindicator weer te geven, en error (tekenreeks of null) om een foutmelding te tonen wanneer het ophalen mislukt. Zo krijgen gebruikers feedback over de asynchrone bewerking, in plaats van zich af te vragen waarom er geen suggesties verschijnen.

Stel in het ophaal-useEffect aan het begin setIsLoading(true) en setError(null) in. Roep daarna fetch(url) aan, verwerk de JSON, roep setSuggestions(data) aan en stel ten slotte setIsLoading(false) in een finally-blok in, of na zowel het succes- als het foutpad. De afhankelijkheidsarray van het effect bevat alleen debouncedInputValue.

Maak bovenaan het effect een nieuwe AbortController en geef controller.signal mee aan de opties van fetch. Roep in de opruimfunctie controller.abort() aan. Wanneer de gebruiker typt en de waarde na debouncing verandert, wordt de vorige fetch afgebroken voordat de nieuwe start. Zo voorkom je dat verouderde resultaten in de verkeerde volgorde binnenkomen.

Wanneer een fetch wordt afgebroken, wordt deze afgewezen met een DOMException met de naam AbortError. Controleer in je catch-blok if (err.name === 'AbortError') return; om afgebroken fetches stil te negeren. Handel alleen echte netwerkfouten of API-fouten af die aan de gebruiker moeten worden getoond.

Stel isLoading vóór de fetch in op true en daarna, wanneer deze is geslaagd of mislukt, op false. Gebruik een finally-blok om ervoor te zorgen dat de status altijd wordt teruggezet: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Zonder het finally-blok zou een fetch-fout de laadindicator voor altijd laten draaien.

Wanneer isLoading true is en het invoerveld tekst bevat, toon je de vervolgkeuzelijst met daarin een gecentreerde laadindicator in plaats van de suggestielijst. Zo weet de gebruiker dat de resultaten eraan komen. Zodra het laden is voltooid en de suggesties zijn binnengekomen, vervang je de laadindicator door de werkelijke suggestie-items.

Wanneer error niet null is, toon je de vervolgkeuzelijst met de foutmelding in plaats van de suggesties. Een bericht als "Suggesties konden niet worden geladen. Probeer het opnieuw." is vriendelijker dan een ruwe fouttekst. Je kunt optioneel een knop toevoegen om het ophalen opnieuw te proberen.

Voorkom dat je lege tekenreeksen of zeer korte zoekopdrachten ophaalt die te veel irrelevante resultaten opleveren. Controleer dit aan het begin van het effect: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Zo verminder je onnodige API-aanroepen en voorkom je een overweldigende lijst resultaten op basis van één teken.

Sla opgehaalde resultaten op in een Map in een useRef: const cache = useRef(new Map()). Controleer vóór het ophalen if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Sla het resultaat na een geslaagde fetch op. Zo voorkom je onnodige netwerkaanvragen voor zoekopdrachten die de gebruiker al heeft getypt.

Voor automatisch aanvullen is een vertraging van 200-300 ms voor debouncing de ideale middenweg. Kortere vertragingen (minder dan 200 ms) zorgen bij snelle typisten voor te veel aanvragen. Langere vertragingen (meer dan 400 ms) maken de suggesties traag en niet-responsief. 250 ms is een veelgebruikte standaardwaarde in productie-implementaties van automatisch aanvullen.

Vervang statisch filteren door een API-ophaalactie in een useEffect die afhankelijk is van de waarde na debouncing. Gebruik AbortController om verouderde aanvragen te annuleren. Voeg de statussen isLoading en error toe voor feedback aan de gebruiker. Stel een minimumaantal tekens in om overmatig veel aanvragen te voorkomen. Sla resultaten op in een ref om onnodige netwerkaanvragen over te slaan.