Asynchroniczne sugestie z debounce

Zamiast filtrować lokalną tablicę, należy wywołać endpoint API, który zwraca pasujące sugestie na podstawie zapytania. Wywołanie API należy umieścić w useEffect zależnym od wartości wejściowej po debounce. W ten sposób odpowiedzialność za filtrowanie zostaje przeniesiona na serwer, co umożliwia dopasowanie rozmyte, ustalanie rankingu oraz generowanie sugestii na podstawie znacznie większego zbioru danych.

Do komponentu autocomplete należy dodać dwie nowe zmienne stanu: isLoading (boolean) do wyświetlania wskaźnika ładowania podczas pobierania oraz error (string lub null) do wyświetlania komunikatu o błędzie, gdy pobieranie się nie powiedzie. Dzięki temu użytkownicy otrzymują informację o operacji asynchronicznej, zamiast zastanawiać się, dlaczego sugestie się nie pojawiają.

W efekcie pobierania useEffect należy na początku ustawić setIsLoading(true) i setError(null), następnie wywołać fetch(url), sparsować dane JSON, wywołać setSuggestions(data), a na końcu ustawić setIsLoading(false) w bloku finally lub po obu ścieżkach: powodzenia i błędu. Tablica zależności efektu powinna zawierać wyłącznie debouncedInputValue.

Na początku efektu należy utworzyć nowy obiekt AbortController i przekazać controller.signal do opcji fetch. W funkcji czyszczącej należy wywołać controller.abort(). Gdy użytkownik pisze i zmienia się wartość po debounce, poprzednie pobieranie zostaje anulowane przed rozpoczęciem nowego, co zapobiega napływaniu nieaktualnych wyników w niewłaściwej kolejności.

Po anulowaniu pobierania obietnica zostaje odrzucona z obiektem DOMException o nazwie AbortError. W bloku catch należy sprawdzić if (err.name === 'AbortError') return;, aby po cichu ignorować anulowane pobierania. Należy obsługiwać tylko rzeczywiste błędy sieci lub błędy API, które powinny zostać pokazane użytkownikowi.

Wartość isLoading należy ustawić na true przed pobieraniem i na false po jego zakończeniu — niezależnie od tego, czy operacja się powiedzie, czy zakończy błędem. Należy użyć bloku finally, aby zagwarantować jej zresetowanie: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)). Bez bloku finally błąd pobierania sprawiłby, że wskaźnik ładowania byłby wyświetlany bez końca.

Gdy isLoading ma wartość true, a pole wejściowe zawiera tekst, należy wyświetlić menu rozwijane z wyśrodkowanym wskaźnikiem zamiast listy sugestii. Informuje to użytkownika, że wyniki są w drodze. Gdy ładowanie się zakończy i pojawią się sugestie, należy zastąpić wskaźnik właściwymi elementami sugestii.

Gdy error nie ma wartości null, należy wyświetlić menu rozwijane z komunikatem o błędzie zamiast sugestii. Komunikat taki jak "Nie udało się wczytać sugestii. Spróbuj ponownie." jest przyjaźniejszy niż surowy tekst błędu. Opcjonalnie można dodać przycisk ponowienia, który ręcznie uruchamia pobieranie.

Należy unikać pobierania dla pustych ciągów lub bardzo krótkich zapytań, które generują zbyt wiele nieistotnych wyników. Na początku efektu należy zastosować warunek ochronny: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }. Zmniejsza to liczbę zbędnych wywołań API i zapobiega wyświetleniu przytłaczającej listy wyników po wpisaniu jednego znaku.

Pobrane wyniki należy przechowywać w obiekcie Map umieszczonym w useRef: const cache = useRef(new Map()). Przed pobieraniem należy sprawdzić if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }. Po pomyślnym pobraniu należy zapisać wynik. Eliminuje to zbędne żądania sieciowe dla zapytań, które użytkownik już wpisał.

W przypadku autocomplete optymalnym opóźnieniem debounce jest 200-300ms. Krótsze opóźnienia (poniżej 200ms) powodują zbyt wiele żądań u osób szybko piszących. Dłuższe opóźnienia (powyżej 400ms) sprawiają, że sugestie wydają się powolne i niereaktywne. W implementacjach autocomplete używanych produkcyjnie często stosuje się domyślnie 250ms.

Dlaczego AbortController jest ważny w komponencie autocomplete wykorzystującym debounce i pobierającym dane z API?

Statyczne filtrowanie należy zastąpić pobieraniem z API wewnątrz useEffect zależnego od wartości po debounce. Należy użyć AbortController do anulowania nieaktualnych żądań. Należy dodać stany isLoading i error, aby przekazywać użytkownikowi informacje o stanie operacji. Należy ustawić minimalną liczbę znaków, aby uniknąć nadmiernej liczby wywołań. Wyniki należy buforować w ref, aby pomijać zbędne żądania sieciowe.