Optimistic updates کیا ہیں اور آپ انہیں محفوظ طریقے سے کیسے نافذ کرتے ہیں؟

Question

Accepted Answer

ایک **optimistic update** فوری طور پر UI کو اپ ڈیٹ کرتا ہے، *فرض کرتے ہوئے* کہ سرور کی درخواست کامیاب ہوگی، جواب کا انتظار کرنے کی بجائے۔ یہ ایپ کو فوری محسوس کراتا ہے — لیکن آپ کو اس صورت کو سنبھالنا چاہیے جہاں درخواست دراصل ناکام ہو **rollback** کے ذریعے۔

## موازنہ

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

## UX کے لیے اس کی اہمیت

زیادہ اعتماد والی کارروائیوں کے لیے (پوسٹ کو پسند کرنا، ٹوڈو کو ٹوگل کرنا، چیٹ کا پیغام بھیجنا)، درخواست تقریباً ہمیشہ کامیاب ہوتی ہے، اس لیے round-trip کا انتظار صرف سمجھے جانے والی تاخیر میں اضافہ کرتا ہے۔ Optimistic updates ان کو فوری محسوس کراتے ہیں۔

## اسے محفوظ طریقے سے نافذ کرنا (rollback اہم ہے)

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

حفاظت کی کلید: **optimistic تبدیلی سے پہلے پچھلی حالت کا snapshot لیں**، اور اگر درخواست ناکام ہو تو اسے بحال کریں۔ Rollback کو چھوڑ دینا UI کو سرور کی حالت کے بارے میں جھوٹ بولتے ہوئے چھوڑ دیتا ہے — یہ خطرناک بگ ہے جو optimistic updates متعارف کروا سکتے ہیں۔

## React Query کے ساتھ (بلٹ ان سپورٹ)

```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 نمونہ کو رسمی شکل دیتا ہے: `onMutate` (snapshot + optimistic update)، `onError` (rollback)، `onSettled` (حقیقت کی تصدیق کے لیے دوبارہ حاصل کریں)۔

## کب استعمال کریں / بچیں

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

## اہمیت

Optimistic updates ایک طاقتور UX تکنیک ہے جو ایپس کو فوری محسوس کراتی ہے نیٹ ورک کا انتظار نہ کر کے — لیکن یہ صرف *محفوظ* ہیں اگر آپ rollback (snapshot-then-restore) نافذ کریں اور غلطیاں سطح پر لائیں۔

نمونہ (snapshot → update → ناکامی پر rollback → reconcile) ضروری علم ہے، اور یہ سمجھنا کہ یہ کب مناسب ہے (کامیابی کے امکانات، کم شرح والی کارروائیاں) بمقابلہ خطرناک (ادائیگیاں) وہ ہے جو ایک پالش شدہ، قابل اعتماد UI کو الگ کرتا ہے اسے سے جو خاموشی سے سرور کی حالت کی غلط نمائندگی کرتا ہے۔