आशावादी अपडेट क्या हैं और आप उन्हें सुरक्षित रूप से कैसे लागू करते हैं?

Question

Accepted Answer

एक **आशावादी अपडेट** UI को **तुरंत** अपडेट करता है, *मानते हुए* कि एक सर्वर अनुरोध सफल होगा, प्रतिक्रिया की प्रतीक्षा करने के बजाय। यह ऐप को तत्काल लगता है — लेकिन आपको उस स्थिति को संभालना चाहिए जहां अनुरोध वास्तव में **वापसी** द्वारा विफल हो जाता है।

## विरोधाभास

```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 के लिए यह क्यों महत्वपूर्ण है

उच्च-आत्मविश्वास वाली कार्रवाइयों (एक पोस्ट को पसंद करना, एक todo को टॉगल करना, एक चैट संदेश भेजना) के लिए, अनुरोध लगभग हमेशा सफल होता है, इसलिए राउंड-ट्रिप की प्रतीक्षा करना केवल माना जाने वाला विलंब जोड़ता है। आशावादी अपडेट इन्हें तत्काल महसूस कराते हैं।

## इसे सुरक्षित रूप से लागू करना (वापसी महत्वपूर्ण है)

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

सुरक्षा की कुंजी: **आशावादी परिवर्तन से पहले पिछली स्थिति का स्नैपशॉट लें**, और यदि अनुरोध विफल हो तो इसे पुनः स्थापित करें। वापसी को छोड़ने से UI सर्वर स्थिति के बारे में झूठ बोलता है — आशावादी अपडेट जो खतरनाक बग पेश कर सकते हैं।

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

## यह क्यों महत्वपूर्ण है

आशावादी अपडेट एक शक्तिशाली UX तकनीक हैं जो नेटवर्क की प्रतीक्षा न करके ऐप्स को तत्काल बनाती हैं — लेकिन वे केवल तभी *सुरक्ष* हैं जब आप वापसी लागू करते हैं (स्नैपशॉट-फिर-पुनः स्थापित) और त्रुटियों को प्रदर्शित करते हैं।

पैटर्न (स्नैपशॉट → अपडेट → विफलता पर वापसी → सामंजस्य) आवश्यक ज्ञान है, और यह समझना कि यह कब उपयुक्त है (संभावित-सफल, कम-दांव कार्रवाई) बनाम खतरनाक (भुगतान) एक पॉलिश, विश्वसनीय UI को उससे अलग करता है जो चुपचाप सर्वर स्थिति का गलत प्रतिनिधित्व करता है।