एक अनुकूल अपडेट 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 आणि एक ज्याने सर्व्हर स्थितीचे मूकपणे खोटेमुठीकरण करते या दरम्यानचे फरक आहे.