Asynkroniset ehdotukset debouncella

Paikallisen taulukon suodattamisen sijaan kutsu API-päätepistettä, joka palauttaa kyselyä vastaavat ehdotukset. API-kutsu sijoitetaan useEffect-efektiin, jonka riippuvuutena on syötteen viivästetty arvo. Näin suodatusvastuu siirtyy palvelimelle, mikä mahdollistaa sumean haun, tulosten järjestämisen ja ehdotukset paljon suuremmasta tietojoukosta.

Lisää automaattiseen täydennykseen kaksi uutta tilamuuttujaa: isLoading (totuusarvo), jolla näytetään latausosoitin haun aikana, ja error (merkkijono tai null), jolla näytetään virheilmoitus haun epäonnistuessa. Näin käyttäjä saa palautetta asynkronisesta toiminnosta sen sijaan, että hänen tarvitsisi ihmetellä, miksi ehdotuksia ei näy.

Aseta hakuun liittyvässä useEffect-efektissä aluksi setIsLoading(true) ja setError(null), kutsu sitten fetch(url)-funktiota, jäsennä JSON, kutsu setSuggestions(data) ja aseta lopuksi setIsLoading(false) finally-lohkossa tai sekä onnistumis- että virhepolun jälkeen. Efektin riippuvuustaulukossa on vain debouncedInputValue.

Luo efektin alussa uusi AbortController ja välitä controller.signal haun asetuksiin. Kutsu siivousfunktiossa controller.abort()-metodia. Kun käyttäjä kirjoittaa ja viivästetty arvo muuttuu, edellinen haku peruutetaan ennen uuden aloittamista. Näin vanhentuneet tulokset eivät pääse saapumaan väärässä järjestyksessä.

Kun haku peruutetaan, se hylätään DOMException-poikkeuksella, jonka nimi on AbortError. Tarkista catch-lohkossa if (err.name === 'AbortError') return;, jotta peruutetut haut ohitetaan hiljaisesti. Käsittele vain aidot verkkovirheet tai API-virheet, jotka käyttäjälle pitää näyttää.

Aseta isLoading arvoksi true ennen hakua ja arvoksi false, kun haku valmistuu onnistuneesti tai epäonnistuu. Käytä finally-lohkoa varmistaaksesi, että arvo palautetaan aina: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Ilman finally-lohkoa hakuerhe jättäisi latausosoittimen pyörimään loputtomasti.

Kun isLoading on tosi ja syötekentässä on tekstiä, näytä pudotusvalikko, jonka keskellä on latausosoitin ehdotusluettelon sijaan. Näin käyttäjä tietää, että tulokset ovat tulossa. Kun lataus on päättynyt ja ehdotukset ovat saapuneet, korvaa latausosoitin varsinaisilla ehdotuksilla.

Kun error ei ole null, näytä pudotusvalikossa virheilmoitus ehdotusten sijaan. Esimerkiksi "Ehdotuksia ei voitu ladata. Yritä uudelleen." on käyttäjäystävällisempi kuin raaka virhemerkkijono. Voit myös lisätä uudelleenyrityspainikkeen, joka käynnistää haun manuaalisesti uudelleen.

Vältä hakua tyhjillä merkkijonoilla tai hyvin lyhyillä kyselyillä, jotka tuottavat liikaa epäolennaisia tuloksia. Lisää efektin alkuun ehto: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Näin tarpeettomat API-kutsut vähenevät eikä yhden merkin perusteella synny valtavaa tulosluetteloa.

Tallenna haetut tulokset useRef-hookin Map-rakenteeseen: const cache = useRef(new Map()). Tarkista ennen hakua if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Tallenna tulos onnistuneen haun jälkeen. Näin jo kirjoitetuille kyselyille ei tehdä tarpeettomia verkkopyyntöjä.

Automaattisessa täydennyksessä toimivin viive on yleensä 200–300 ms. Lyhyemmät viiveet (alle 200 ms) käynnistävät liian monta pyyntöä nopeasti kirjoittaville käyttäjille. Pidemmät viiveet (yli 400 ms) saavat ehdotukset tuntumaan hitailta ja reagoimattomilta. 250 ms on yleisesti käytetty oletusarvo tuotantokäytössä olevissa automaattisen täydennyksen toteutuksissa.

Korvaa staattinen suodatus API-haulla useEffect-efektin sisällä ja käytä riippuvuutena viivästettyä arvoa. Peruuta vanhentuneet pyynnöt AbortController-oliolla. Lisää isLoading- ja error-tila, jotta käyttäjä saa palautetta. Aseta merkkimäärän vähimmäisraja tarpeettomien kutsujen välttämiseksi. Tallenna tulokset refiin, jotta tarpeettomat verkkopyynnöt voidaan ohittaa.