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