Optimistic UI update nedir? Sunucu isteği başarısız olursa durumu nasıl geri alırsınız?

Optimistic update, kullanıcının aksiyonunun sonucunu sunucu yanıtını beklemeden arayüzde hemen göstermek, sonra sunucu yanıtına göre onaylamak veya geri almaktır. Beğeni, yapılacak iş işaretleme, sepete ekleme gibi başarısız olma ihtimali düşük işlemlerde uygulamayı çok daha hızlı hissettirir.

Adımlar

1. Mevcut durumu (snapshot) sakla.
2. UI'ı yeni değerle hemen güncelle.
3. İsteği gönder.
4. Hata olursa snapshot'a geri dön ve kullanıcıya bildir.
5. Her durumda (başarı/hata) sunucudaki gerçek veriyle yeniden senkronize ol.

const qc = useQueryClient();
const toggleLike = useMutation({
  mutationFn: (postId) => fetch(`/api/posts/${postId}/like`, { method: "POST" }),
  onMutate: async (postId) => {
    await qc.cancelQueries({ queryKey: ["post", postId] }); // yarışan fetch eski veriyi yazmasın
    const prev = qc.getQueryData(["post", postId]);
    qc.setQueryData(["post", postId], (p) => ({
      ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1),
    }));
    return { prev };
  },
  onError: (_err, postId, ctx) => {
    qc.setQueryData(["post", postId], ctx.prev);
    toast.error("İşlem başarısız, tekrar deneyin");
  },
  onSettled: (_d, _e, postId) => qc.invalidateQueries({ queryKey: ["post", postId] }),
});

React 19'da useOptimistic hook'u Server Actions ile benzer bir akış sunar.

Backend tarafında gerekenler

• Idempotent endpoint: "beğeni ekle" toggle yerine PUT /likes (beğenildi = true) gibi durum belirten bir endpoint, tekrar eden veya sırası karışan isteklerde doğru sonuç verir.
• Client geçici ID üretiyorsa (yeni yorum), sunucu gerçek ID'yi döndürmeli ve client eşleştirmeli.

Ne zaman kullanılmaz

Ödeme, para transferi, stok rezervasyonu gibi başarısızlığın ciddi sonuçları olan veya sunucunun karar verdiği işlemlerde optimistic update yanıltıcıdır; burada net bir yükleniyor durumu gösterilmelidir.