Ręczne implementowanie optymistycznych aktualizacji

Ręczne optymistyczne aktualizacje zaczynają się od lokalnego stanu komponentu zainicjalizowanego danymi z serwera: const [items, setItems] = useState(serverItems). To ten lokalny stan jest renderowany i to jego wartości będą optymistycznie modyfikowane. Nie należy bezpośrednio modyfikować danych pobranych z serwera — należy zachować kontrolowaną lokalną kopię.

Gdy użytkownik wywoła mutację (klikając „Dodaj”, „Lubię to” lub „Usuń”), należy natychmiast zaktualizować stan przed wywołaniem API: setItems(prev => [...prev, newItem]). Interfejs od razu odzwierciedla zmianę. Dopiero po tej aktualizacji należy wysłać rzeczywiste żądanie sieciowe.

Przed wykonaniem optymistycznej aktualizacji należy zapisać bieżący stan: const previousItems = items. Ta migawka jest celem wycofania zmian. Jeśli wywołanie API się nie powiedzie, należy przywrócić tę wartość. Należy przechowywać ją w zmiennej, a nie w stanie, ponieważ jest potrzebna tylko na czas trwania oczekującej mutacji.

Po optymistycznej aktualizacji należy asynchronicznie wykonać wywołanie API. Należy umieścić je w bloku try/catch. Po powodzeniu można opcjonalnie ponownie pobrać dane, aby zsynchronizować je ze stanem serwera, albo zaufać optymistycznemu stanowi, jeśli serwer zwróciłby te same dane. W przypadku niepowodzenia należy użyć zapisanego poprzedniego stanu, aby wycofać zmianę.

W bloku catch mutacji należy wykonać: setItems(previousItems). Spowoduje to przywrócenie stanu sprzed optymistycznej aktualizacji. Po wycofaniu zmian należy wyświetlić powiadomienie o błędzie. Użytkownicy rozumieją, że rzadkie błędy się zdarzają — nie akceptują natomiast cichej niespójności.

Po wycofaniu zmian należy wyświetlić komunikat o błędzie: „Nie udało się zapisać zmian. Spróbuj ponownie.” wraz z przyciskiem „Ponów”, który ponownie wywołuje tę samą mutację. Daje to użytkownikom kontrolę nad sytuacją. Połączenie wycofania zmian, toastu z błędem i możliwości ponowienia pozwala sprawnie obsłużyć niepowodzenie bez blokowania całego interfejsu.

Podczas optymistycznego dodawania nowego elementu serwer nie przypisał mu jeszcze rzeczywistego identyfikatora. Należy utworzyć tymczasowy identyfikator dla optymistycznego elementu: const tempId = crypto.randomUUID(). Należy użyć go jako klucza elementu na liście. Po pomyślnej odpowiedzi API należy zastąpić tymczasowy identyfikator rzeczywistym identyfikatorem przypisanym przez serwer.

Po pomyślnym utworzeniu elementu serwer zwraca rzeczywisty identyfikator. Należy zaktualizować stan, zastępując tymczasowy element: setItems(prev => prev.map(item => item.id === tempId ? { ...item, id: serverResponse.id } : item)). Takie uzgodnienie gwarantuje, że kolejne operacje będą używać prawidłowego identyfikatora serwera.

Jeśli użytkownik wywoła dwie mutacje w krótkim odstępie czasu, odpowiedzi mogą nadejść w innej kolejności. Odpowiedź drugiej mutacji może nadejść przed odpowiedzią pierwszej, a wycofanie pierwszej zmiany może nadpisać poprawny stan wynikający z drugiej. Jest to warunek wyścigu charakterystyczny dla optymistycznego interfejsu użytkownika.

Jednym ze sposobów zapobiegania warunkom wyścigu jest szeregowanie mutacji za pomocą kolejki. Gdy mutacja jest w toku, należy wyłączyć przycisk uruchamiający, ustawiając stan isSubmitting na true. Kolejną mutację należy dopuścić dopiero po zakończeniu poprzedniej. Ogranicza to nieco responsywność, ale gwarantuje prawidłową kolejność zmian stanu.

W przypadku operacji usuwania należy zapisać poprzednie elementy, odfiltrować usuwany element ze stanu, wywołać API usuwania i wycofać zmiany w razie niepowodzenia. Usuwanie jest prostsze niż tworzenie, ponieważ nie wymaga uzgadniania identyfikatorów, ale obowiązują te same zasady. Przed wykonaniem wywołania API warto rozważyć krótkie opóźnienie, podczas którego zostanie wyświetlona opcja „Cofnij”.

Dlaczego elementy dodawane optymistycznie potrzebują tymczasowego identyfikatora?

Wzorzec ręczny wygląda następująco: zapisz previousItems, wywołaj setItems z nowym stanem, wykonaj wywołanie API, a w razie niepowodzenia wycofaj zmiany za pomocą setItems(previousItems) i wyświetl błąd. W przypadku dodawania użyj crypto.randomUUID() jako tymczasowego identyfikatora, a po powodzeniu zsynchronizuj go z identyfikatorem serwera. Zapobiegaj warunkom wyścigu, wyłączając element uruchamiający na czas trwania mutacji. Wycofanie zmian, powiadomienie toast i możliwość ponowienia to standardowy sposób obsługi błędów.