An optimistic update updates the UI immediately, assuming a server request will succeed, instead of waiting for the response. This makes the app feel instant — but you must handle the case where the request actually fails by rolling back.
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)
Yüksek güvenirlik eylemleri (bir gönderiyi beğenmek, todo'yu değiştirmek, sohbet mesajı göndermek) için istek neredeyse her zaman başarılı olur, bu nedenle yanıt için beklemek yalnızca hissedilen gecikmeyi arttırır. İyimser güncellemeler bu işlemleri anlık hale getirir.
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
}
}
Güvenliğin anahtarı: iyimser değişiklikten önce önceki durumun anlık görüntüsünü alın ve istek başarısız olursa geri yükleyin. Geri almayı atlamak UI'ı sunucu durumu hakkında yalan söylemesine bırakır — iyimser güncellemelerin tanıtabileceği tehlikeli hata.
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 deseni resmileştirir: onMutate (snapshot + optimistic update), onError (geri alma), onSettled (gerçeği doğrulamak için refetch).
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
İyimser güncellemeler, ağ için beklemeyen uygulamaları anlık hale getiren güçlü bir UX tekniktir — ancak geri almayı (snapshot-then-restore) uygulayıp hataları ortaya çıkarırsanız güvenli olur.
Desen (snapshot → update → on failure roll back → reconcile) önemli bilgidir ve bunun ne zaman uygun olduğunu (başarı olasılığı yüksek, düşük riskli eylemler) zararlı olana (ödemeler) karşı anlamak, parlak ve güvenilir bir UI'ı sunucu durumunu sessizce yanlış temsil etmekten ayırt eden şeydir.