Was sind optimistische Updates und wie implementierst du sie sicher?

Question

Accepted Answer

Ein **optimistisches Update** aktualisiert die UI **sofort**, *in der Annahme*, dass ein Server-Request erfolgreich sein wird, anstatt auf die Antwort zu warten. Dies lässt die App sich sofort anfühlen — aber du musst den Fall handhaben, in dem der Request tatsächlich fehlschlägt, indem du ihn **zurückrollst**.

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

## Warum es für UX wichtig ist

Bei vertrauenswürdigen Aktionen (einen Beitrag liken, eine Aufgabe umschalten, eine Chat-Nachricht senden) ist der Request fast immer erfolgreich, also das Warten auf den Round-Trip fügt nur wahrgenommene Latenz hinzu. Optimistische Updates machen diese Aktionen sofort anfühlen.

## Sichere Implementierung (Rollback ist kritisch)

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

Der Schlüssel zu Sicherheit: **Snapshot des vorherigen Zustands vor der optimistischen Änderung erstellen** und ihn wiederherstellen, wenn der Request fehlschlägt. Das Auslassen des Rollback lässt die UI über den Server-Zustand lügen — der gefährliche Bug, den optimistische Updates einführen können.

## Mit React Query (eingebaute Unterstützung)

```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 formalisiert das Muster: `onMutate` (Snapshot + optimistisches Update), `onError` (Rollback), `onSettled` (Nachfetch zur Bestätigung).

## Wann verwenden / vermeiden

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

## Warum es wichtig ist

Optimistische Updates sind eine leistungsstarke UX-Technik, die Apps sofort anfühlen lässt, indem sie nicht auf das Netzwerk warten — aber sie sind nur *sicher*, wenn du Rollback (Snapshot-dann-Wiederherstellung) implementierst und Fehler anzeigst.

Das Muster (Snapshot → Update → bei Fehler Rollback → Abgleich) ist unverzichtbares Wissen, und zu verstehen, wann es angebracht ist (wahrscheinlich erfolgreiche, risikoarme Aktionen) versus gefährlich (Zahlungen), ist das, was eine polierte, vertrauenswürdige UI von einer unterscheidet, die den Server-Zustand stillschweigend falsch darstellt.