Optimistic updates भनेको के हो र तपाइँ तिनलाई सुरक्षित तरिकाले कसरी लागू गर्नुहुन्छ?

Question

Accepted Answer

एक **optimistic update** UI लाई **तत्काल** अपडेट गर्छ, *मान्ने* कि एक server request सफल हुनेछ, प्रतिक्रियाको लागि प्रतीक्षा गर्नुको सट्टा। यसले एप लाई तत्काल महसुस गराउँछ — तर तपाइँले request वास्तवमा असफल हुने अवस्था सम्हाल्न हुँदैन **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 को लागि यो किन महत्त्वपूर्ण छ

उच्च-आत्मविश्वास कार्यहरूको लागि (post लाई like गर्ने, todo लाई toggle गर्ने, chat message पठाउने), request लगभग सधैं सफल हुन्छ, त्यसैले round-trip को लागि प्रतीक्षा गर्ने केवल perceived lag थपिन्छ। 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 change भन्दा पहिले अगिलको अवस्था को snapshot लिनुहोस्**, र यदि request असफल हुन्छ भने यसलाई पुनर्स्थापन गर्नुहोस्। Rollback छोड्ने UI लाई server state को बारे मा झुठो राख्छ — optimistic updates ले परिचय गर्न सक्ने खतरनाक bug।

## 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 ले pattern औपचारिक गर्छ: `onMutate` (snapshot + optimistic update), `onError` (rollback), `onSettled` (सत्य पुष्टि गर्न refetch)।

## कहिले प्रयोग गर्न / टाल्न

```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) लागू गर्नुहुन्छ र errors सतह गर्नुहुन्छ।

यो pattern (snapshot → update → on failure roll back → reconcile) आवश्यक ज्ञान हो, र यो बुझ्ने कि यो कहिले उपयुक्त छ (likely-to-succeed, low-stakes actions) विरुद्ध खतरनाक (payments) यो हो जसले एक polished, trustworthy UI लाई एकदम मिसलिपुत server state को रूपमा सावधानीपूर्वक प्रतिनिधित्व गर्नेबाट अलग गर्छ।