Optimistische Updates funktionieren am besten, wenn Fehler einfach rückgängig zu machen sind_

Optimistische UI ist eine der schnellsten Methoden, um ein Produkt reaktionsfähig erscheinen zu lassen, ohne die Netzwerk-Latenz wirklich zu reduzieren. Die Benutzeroberfläche wird sofort aktualisiert, während der Serveraufruf im Hintergrund nachzieht. Wenn es funktioniert, fühlt sich die Erfahrung scharf an. Wenn es jedoch schlecht fehlschlägt, fühlt es sich unehrlich an.

Deshalb lautet die architektonische Frage nicht: "Sollten wir optimistische Updates verwenden?" sondern "Welche Mutationen sind sicher genug, um vorhergesagt zu werden?"

Eine gute optimistische Mutation

Wenig risikobehaftete Aktionen mit einfacher Rückgängigmachung sind die besten Kandidaten:

• einen Beitrag liken
• eine Einstellung umschalten
• eine lokale Liste neu anordnen
• ein Entwurfselement hinzufügen, das sauber entfernt werden kann

Mit TanStack Query ist das Muster explizit:

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (nextTodo) => {
    await queryClient.cancelQueries({ queryKey: ["todos"] });
    const previous = queryClient.getQueryData<Todo[]>(["todos"]);
 
    queryClient.setQueryData<Todo[]>(["todos"], (current = []) =>
      current.map((todo) => (todo.id === nextTodo.id ? nextTodo : todo)),
    );
 
    return { previous };
  },
  onError: (_error, _nextTodo, context) => {
    queryClient.setQueryData(["todos"], context?.previous);
  },
});

Der wichtige Teil ist nicht das optimistische Schreiben. Es ist der Rückgängigmachungsweg.

Wo es riskant wird

Optimistische UI wird gefährlich, wenn:

• Konflikte häufig sind
• Geschäftsregeln nur auf dem Server existieren
• Geld oder Inventar involviert ist
• ein Fehler schwer zu erklären oder rückgängig zu machen ist

Eine Zahlungsbestätigung sollte nicht "optimistisch erfolgreich" sein. Ein sozialer "Gefällt mir" kann es wahrscheinlich sein.

Bessere Regel

Verwenden Sie optimistische Updates, wo Fehler selten sind, die Rückgängigmachung klar ist und der Benutzer verstehen kann, was passiert ist, wenn der Server die Änderung ablehnt. Das führt zu einem schnellen Produkt, ohne die Benutzer dazu zu bringen, der Benutzeroberfläche zu misstrauen.

Weiterführende Literatur

• TanStack Query: Optimistische Updates
• React Query Mutationen