Co jsou optimistické aktualizace a jak je bezpečně implementovat?

Question

Accepted Answer

**Optimistická aktualizace** aktualizuje uživatelské rozhraní **okamžitě**, *za předpokladu*, že bude požadavek serveru úspěšný, místo čekání na odpověď. Díky tomu se aplikace jeví jako okamžitá — ale musíte zpracovat případ, kdy požadavek skutečně selže, **vrácením** změny.

## 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)
```

## Proč je to důležité pro UX

Pro akce s vysokou mírou jistoty (označení příspěvku, přepnutí úkolu, odeslání zprávy), je požadavek téměř vždy úspěšný, takže čekání na odpověď jen zvyšuje vnímanou latenci. Optimistické aktualizace tyto akce dělají okamžitými.

## Bezpečná implementace (vrácení je kritické)

```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
  }
}
```

Klíč k bezpečnosti: **vytvořit snímek předchozího stavu před optimistickou změnou** a obnovit jej, pokud požadavek selže. Vynechání vrácení ponechá uživatelské rozhraní lhát o stavu serveru — nebezpečnou chybu, kterou mohou optimistické aktualizace zavést.

## S React Query (vestavěná podpora)

```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 vzor: `onMutate` (snímek + optimistická aktualizace), `onError` (vrácení), `onSettled` (opětovné načtení pro potvrzení pravdy).

## Kdy používat / vyhnout se

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

## Proč je to důležité

Optimistické aktualizace jsou mocná technika UX, která dělá aplikace okamžitými tím, že nečekají na síť — ale jsou *bezpečné* pouze pokud implementujete vrácení (snímek-pak-obnovení) a zobrazíte chyby.

Vzor (snímek → aktualizace → při selhání vrácení → reconciliation) je základní znalost, a pochopení toho, kdy je vhodný (akce s vysokou pravděpodobností úspěchu, nízké riziko) versus nebezpečný (platby) je to, co odděluje vyleštěné, důvěryhodné uživatelské rozhraní od toho, které tiše zkresluje stav serveru.