অপ্টিমিস্টিক আপডেট কী এবং আপনি কীভাবে সেগুলি নিরাপদে বাস্তবায়ন করেন?

Question

Accepted Answer

একটি **অপ্টিমিস্টিক আপডেট** ইউআই **অবিলম্বে** আপডেট করে, *ধরে নিয়ে* যে একটি সার্ভার অনুরোধ সফল হবে, প্রতিক্রিয়ার জন্য অপেক্ষা করার পরিবর্তে। এটি অ্যাপটিকে তাৎক্ষণিক মনে করায় — তবে আপনাকে সেই ক্ষেত্রটি পরিচালনা করতে হবে যেখানে অনুরোধ প্রকৃতপক্ষে ব্যর্থ হয় **রোলব্যাক** করে।

## বৈসাদৃশ্য

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

## ইউএক্স-এর জন্য কেন এটি গুরুত্বপূর্ণ

উচ্চ-আত্মবিশ্বাসী ক্রিয়াগুলির জন্য (পোস্ট পছন্দ করা, টুডু টগল করা, চ্যাট বার্তা পাঠানো), অনুরোধ প্রায় সবসময় সফল হয়, তাই রাউন্ড-ট্রিপের জন্য অপেক্ষা করা কেবল অনুভূত বিলম্ব যোগ করে। অপ্টিমিস্টিক আপডেটগুলি এগুলিকে তাৎক্ষণিক অনুভব করায়।

## এটি নিরাপদে বাস্তবায়ন করা (রোলব্যাক সমালোচনামূলক)

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

নিরাপত্তার চাবিকাঠি: **অপ্টিমিস্টিক পরিবর্তনের আগে পূর্ববর্তী অবস্থার একটি স্ন্যাপশট নিন**, এবং অনুরোধ ব্যর্থ হলে এটি পুনরুদ্ধার করুন। রোলব্যাক এড়িয়ে যাওয়া ইউআইকে সার্ভার অবস্থা সম্পর্কে মিথ্যা বলার জন্য ছেড়ে দেয় — অপ্টিমিস্টিক আপডেটগুলি প্রবর্তন করতে পারে এমন বিপজ্জনক বাগ।

## 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` (স্ন্যাপশট + অপ্টিমিস্টিক আপডেট), `onError` (রোলব্যাক), `onSettled` (সত্য নিশ্চিত করতে রি-ফেচ)।

## কখন ব্যবহার করতে হবে / এড়াতে হবে

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

## কেন এটি গুরুত্বপূর্ণ

অপ্টিমিস্টিক আপডেটগুলি একটি শক্তিশালী ইউএক্স কৌশল যা নেটওয়ার্কে অপেক্ষা না করে অ্যাপগুলিকে তাৎক্ষণিক অনুভব করায় — তবে তারা শুধুমাত্র *নিরাপদ* যদি আপনি রোলব্যাক (স্ন্যাপশট-তারপর-পুনরুদ্ধার) বাস্তবায়ন করেন এবং ত্রুটিগুলি সারফেস করেন।

প্যাটার্নটি (স্ন্যাপশট → আপডেট → ব্যর্থতায় রোলব্যাক → সামঞ্জস্য) অপরিহার্য জ্ঞান, এবং বোঝা যে এটি কখন উপযুক্ত (সফল হওয়ার সম্ভাবনা, কম-ঝুঁকির ক্রিয়া) বনাম বিপজ্জনক (পেমেন্ট) তা একটি পলিশড, বিশ্বাসযোগ্য ইউআই এবং একটি যা নীরবে সার্ভার অবস্থা ভুল উপস্থাপন করে তার মধ্যে পার্থক্য।