An optimistic update updates the UI immediately, assuming a server request will succeed, instead of waiting for the response. This makes the app feel instant — but you must handle the case where the request actually fails by rolling back.
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)
ఎక్కువ-విశ్వాస చర్యల కోసం (పోస్ట్ను ఇష్టపడటం, టోడో టాగిల్ చేయడం, చాట్ సందేశం పంపడం), అభ్యర్థన దాదాపు ఎల్లప్పుడూ విజయవంతమవుతుంది, కాబట్టి ప్రతిస్పందన కోసం ఎదురు చూస్తే కేవలం గ్రహించిన ఆలస్యం జతచేస్తుంది. ఆశావాద నవీకరణలు వీటిని తక్షణమైనవిగా చేస్తాయి.
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 విధానం — కానీ మీరు రోల్బ్యాక్ (స్నాప్షాట్-ఆ-పునరుద్ధరించు) అమలు చేసి లోపాలను ఉపరితలంపై ఉంచినప్పుడు safe అవుతుంది.
నమూనా (స్నాప్షాట్ → నవీకరణ → విఫలతపై రోల్బ్యాక్ → సమన్వయం) ముఖ్యమైన జ్ఞానం, మరియు ఇది సరిఅయిన సమయం (విజయానికి సంభవ్యతలు ఉన్న, తక్కువ-ప్రమాద చర్యలు) విరుద్ధంగా ప్రమాదకరమైనవిగా (చెల్లింపులు) ఎక్కడ ఉందో అర్థం చేసుకోవడం, ఒక సన్నిహిత, విశ్వసనీయ UI ని సర్వర్ స్థితిని నిశ్శబ్దంగా చేయని ఒకటి నుండి వేరు చేస్తుంది.