Zastosowania praktyczne: wyszukiwanie, przewijanie, zmiana rozmiaru

W komponencie wyszukiwania na żywo należy utrzymywać dwie oddzielne zmienne stanu: inputValue przechowującą surowe dane wejściowe (aktualizowaną przy każdym naciśnięciu klawisza, dzięki czemu pole pozostaje responsywne) oraz debouncedQuery pochodzącą z useDebounce(inputValue, 300) (aktualizowaną 300 ms po zakończeniu pisania i uruchamiającą wywołanie API). Taki podział zapewnia natychmiastową informację wizualną bez nadmiernej liczby żądań.

Wskaźnik ładowania należy wyświetlać od razu po rozpoczęciu pisania przez użytkownika, a nie dopiero po rozpoczęciu wywołania API. Należy ustawić isLoading: true, gdy tylko inputValue !== debouncedQuery — w czasie oczekiwania na debounce wartości te nie są zsynchronizowane. Po ustabilizowaniu się zapytania i zakończeniu pobierania należy ponownie ustawić tę wartość na false. Dzięki temu użytkownik przez cały czas widzi responsywny wskaźnik ładowania.

Efekt paralaksy lub pasek postępu czytania aktualizuje się na podstawie pozycji przewijania. Obsługę przewijania należy ograniczyć do maksymalnie 60 kl./s za pomocą opóźnienia 16 ms: const throttledScrollY = useThrottle(scrollY, 16). Interfejs aktualizuje się płynnie bez kosztownego ponownego obliczania pozycji przy każdym pikselu przewijania.

Nasłuchiwanie zmiany rozmiaru okna w celu ponownego obliczenia układu najlepiej realizować za pomocą debounce, a nie throttle. Obliczenia układu muszą zostać wykonane tylko raz, po zakończeniu zmiany rozmiaru. Należy użyć opóźnienia debounce wynoszącego 200 ms dla wymiarów okna. Podczas przeciągania w celu zmiany rozmiaru interfejs może wyświetlać uproszczony stan, a przeliczony układ pojawi się po zakończeniu zmiany rozmiaru.

Po zmianie debouncedQuery należy utworzyć nowy AbortController i przekazać jego signal do fetch(url, { signal }). Należy zwrócić funkcję czyszczącą, która wywołuje controller.abort(). Anuluje to żądanie będące w toku dla poprzedniego zapytania, gdy pojawi się nowe zapytanie po debounce, i zapobiega warunkom wyścigu, w których wolniejsza wcześniejsza odpowiedź nadpisuje szybszą późniejszą odpowiedź.

Bez AbortController, jeśli użytkownik wpisze "re", zaczeka, a następnie wpisze "react", drugie zapytanie może zwrócić wynik przed pierwszym (na przykład z powodu buforowania). Wyniki wyszukiwania najpierw wyświetlą wyniki dla React, a następnie zostaną nadpisane nieaktualnymi wynikami dla "re". AbortController zapobiega temu, całkowicie anulując wcześniejsze żądanie.

Lista rozwijana łączy debounce dla wywołań API z natychmiastowo aktualizowanym stanem wyświetlania pola wejściowego. inputValue steruje zawartością pola tekstowego. useDebounce(inputValue, 250) określa moment wysłania żądania pobrania sugestii. Lista sugestii jest renderowana na podstawie stanu pobranych wyników, który jest niezależny od obu stanów pola wejściowego.

Asynchroniczną walidację formularza, na przykład sprawdzanie, czy dany adres e-mail już istnieje, należy poddawać debounce, aby uniknąć przeciążania serwera żądaniami przy każdym naciśnięciu klawisza. Należy zastosować debounce o opóźnieniu 400 ms dla wartości pola i wysyłać żądanie walidacji w komponencie useEffect zależnym od wartości po debounce. Podczas oczekiwania na zakończenie walidacji należy wyświetlać w polu wskaźnik ładowania.

Debounce doskonale nadaje się do automatycznego zapisywania zawartości formularza podczas pisania. Należy ustawić debounce o opóźnieniu 1000 ms dla obiektu wartości formularza. Gdy wartość po debounce ulegnie zmianie, należy uruchomić zapis do localStorage lub punktu końcowego API. Podczas oczekiwania na debounce użytkownik widzi wskaźnik "Zapisywanie...", a po zakończeniu żądania — "Zapisano".

Wartości opóźnień są decyzjami dotyczącymi doświadczenia użytkownika. W przypadku wyszukiwania 200–300 ms zapewnia równowagę między responsywnością a zmniejszeniem liczby żądań. W przypadku zmiany rozmiaru 150–200 ms jest akceptowalne, ponieważ użytkownicy oczekują, że układ ustabilizuje się po zakończeniu zmiany rozmiaru. W przypadku automatycznego zapisu 1000 ms daje użytkownikowi czas na wpisanie zdania przed zapisaniem. Wartość należy dostosować do oczekiwanej szybkości interakcji.

Rzeczywiste aplikacje często wymagają jednoczesnego zastosowania wielu optymalizacji. Edytor dokumentów może na przykład używać debounce do automatycznego zapisu (1 s), throttle do obliczania liczby słów (500 ms) oraz IntersectionObserver do analityki. Techniki te dobrze ze sobą współdziałają, ponieważ każda z nich działa niezależnie, na własnym zegarze i w swoim zakresie.

Dlaczego należy używać AbortController razem z zapytaniem wyszukiwania obsługiwanym przez debounce?

Należy używać useDebounce dla pól wyszukiwania, obsługi zmiany rozmiaru i automatycznego zapisu formularza. useThrottle należy stosować podczas przewijania i poruszania myszą. Wywołania API obsługiwane przez debounce należy zawsze łączyć z AbortController, aby zapobiegać warunkom wyścigu. Stan ładowania należy wyświetlać zawsze, gdy inputValue !== debouncedQuery, aby interfejs pozostał responsywny i dostarczał użytkownikowi odpowiednich informacji.