Eliminacja race conditions w React za pomocą AbortController
Użytkownicy poruszają się szybko w aplikacjach webowych. Ta szybkość generuje dwa główne problemy dla programistów.
Pierwszym problemem jest pułapka odmontowanego komponentu (unmounted component). Użytkownik klika przycisk, aby pobrać dane. Żądanie trwa cztery sekundy. Po dwóch sekundach użytkownik klika „wstecz” i opuszcza stronę. Żądanie nadal trwa w tle. Gdy dane docierają, kod próbuje zaktualizować komponent, który już nie istnieje. Powoduje to wycieki pamięci.
Drugim problemem jest race condition (wyścig). Często zdarza się to w paskach wyszukiwania.
- Użytkownik wpisuje „A”. Rozpoczyna się żądanie 1.
- Użytkownik wpisuje „AB”. Rozpoczyna się żądanie 2.
- Żądanie 2 kończy się jako pierwsze i wyświetla poprawne dane.
- Żądanie 1 kończy się z opóźnieniem i nadpisuje ekran starymi danymi.
Oba te problemy rozwiązujesz za pomocą AbortController API. Narzędzie to pozwala zatrzymać żądanie sieciowe, gdy nie jest już potrzebne.
Jak to zaimplementować:
- Utwórz nowy
AbortControllerwewnątrzuseEffect. - Przekaż sygnał kontrolera do żądania
fetch. - Użyj bloku
try/catch, aby obsłużyć błąd. - Sprawdź, czy nazwa błędu to
AbortError, aby zignorować celowe anulowania. - Zwróć funkcję czyszczącą (cleanup function) w
useEffect, aby wywołaćcontroller.abort().
Ten wzorzec działa, gdy komponent zostaje odmontowany lub gdy zmienia się zależność.
Zalety tego podejścia:
- Zapobiegasz nadpisywaniu nowych danych przez nieaktualne dane.
- Zapobiegasz wyciekom pamięci w aplikacji React.
- Zwalniasz połączenia sieciowe przeglądarki.
- Twoja aplikacja pozostaje przewidywalna i stabilna.
Źródło: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899