एक आशावादी अपडेट UI को तुरंत अपडेट करता है, मानते हुए कि एक सर्वर अनुरोध सफल होगा, प्रतिक्रिया की प्रतीक्षा करने के बजाय। यह ऐप को तत्काल लगता है — लेकिन आपको उस स्थिति को संभालना चाहिए जहां अनुरोध वास्तव में वापसी द्वारा विफल हो जाता है।
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)
उच्च-आत्मविश्वास वाली कार्रवाइयों (एक पोस्ट को पसंद करना, एक todo को टॉगल करना, एक चैट संदेश भेजना) के लिए, अनुरोध लगभग हमेशा सफल होता है, इसलिए राउंड-ट्रिप की प्रतीक्षा करना केवल माना जाने वाला विलंब जोड़ता है। आशावादी अपडेट इन्हें तत्काल महसूस कराते हैं।
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 सर्वर स्थिति के बारे में झूठ बोलता है — आशावादी अपडेट जो खतरनाक बग पेश कर सकते हैं।
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 (सत्य की पुष्टि के लिए पुनः प्राप्त करें)।
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
आशावादी अपडेट एक शक्तिशाली UX तकनीक हैं जो नेटवर्क की प्रतीक्षा न करके ऐप्स को तत्काल बनाती हैं — लेकिन वे केवल तभी सुरक्ष हैं जब आप वापसी लागू करते हैं (स्नैपशॉट-फिर-पुनः स्थापित) और त्रुटियों को प्रदर्शित करते हैं।
पैटर्न (स्नैपशॉट → अपडेट → विफलता पर वापसी → सामंजस्य) आवश्यक ज्ञान है, और यह समझना कि यह कब उपयुक्त है (संभावित-सफल, कम-दांव कार्रवाई) बनाम खतरनाक (भुगतान) एक पॉलिश, विश्वसनीय UI को उससे अलग करता है जो चुपचाप सर्वर स्थिति का गलत प्रतिनिधित्व करता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें