Czym są optymistyczne aktualizacje i jak je bezpiecznie implementować?

Question

IT Interview Practice · Accepted Answer

**Optymistyczna aktualizacja** aktualizuje interfejs użytkownika **natychmiast**, *zakładając*, że żądanie do serwera się powiedzie, zamiast czekać na odpowiedź. To sprawia, że aplikacja wydaje się błyskawiczna — ale musisz obsługiwać przypadek, w którym żądanie rzeczywiście się nie powiedzie, **wycofując zmianę**.

## Kontrast

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## Dlaczego to ważne

W przypadku akcji z wysokim stopniem pewności (polubienie postu, przełączenie zadania todo, wysłanie wiadomości czatu), żądanie prawie zawsze się powiedzie, więc czekanie na round-trip tylko dodaje opóźnienia. Optymistyczne aktualizacje sprawią, że będą wydawać się natychmiastowe.

## Bezpieczna implementacja (wycofanie jest krytyczne)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

Klucz do bezpieczeństwa: **wykonaj zrzut poprzedniego stanu przed optymistyczną zmianą** i przywróć go, jeśli żądanie się nie powiedzie. Pominięcie wycofania pozostawia interfejs użytkownika kłamący o stanie serwera — to niebezpieczny błąd, który mogą wprowadzić optymistyczne aktualizacje.

## Z React Query (wbudowana obsługa)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

React Query formalizuje wzorzec: `onMutate` (zrzut + optymistyczna aktualizacja), `onError` (wycofanie), `onSettled` (ponowne pobranie, aby potwierdzić prawdę).

## Kiedy używać / unikać

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## Dlaczego to ważne

Optymistyczne aktualizacje to potężna technika UX, która sprawia, że aplikacje wydają się natychmiastowe, ponieważ nie czekamy na sieć — ale są bezpieczne tylko wtedy, gdy implementujesz wycofanie (zrzut-następnie-przywrócenie) i wyświetlasz błędy.

Wzorzec (zrzut → aktualizacja → w przypadku niepowodzenia wycofaj → uzgodnij) to niezbędna wiedza, a zrozumienie, kiedy jest to stosowne (działania, które prawdopodobnie się powiodą, niskiego ryzyka) w przeciwieństwie do niebezpiecznych (płatności), to to, co odróżnia elegancki, godny zaufania interfejs od tego, który po cichu zniekształca stan serwera.

Kontrast

Dlaczego to ważne

Bezpieczna implementacja (wycofanie jest krytyczne)

Z React Query (wbudowana obsługa)

Kiedy używać / unikać

Dlaczego to ważne

Powiązane pytania