आशावादी अपडेट मैन्युअल रूप से लागू करना

मैन्युअल आशावादी अपडेट की शुरुआत सर्वर डेटा से आरंभ की गई स्थानीय घटक स्थिति से होती है: const [items, setItems] = useState(serverItems)। इसी स्थानीय स्थिति को आप प्रदर्शित करते हैं और इसी में आशावादी रूप से बदलाव करेंगे। आपको सर्वर से प्राप्त डेटा में सीधे बदलाव NOT करना चाहिए—अपने नियंत्रण में उसकी स्थानीय प्रति रखें।

जब उपयोगकर्ता कोई डेटा परिवर्तन शुरू करता है ("जोड़ें", "पसंद", "हटाएँ" पर क्लिक करके), तो API कॉल करने से पहले ही स्थिति को तुरंत अपडेट करें: setItems(prev => [...prev, newItem])। यूज़र इंटरफ़ेस तुरंत बदलाव दिखाता है। वास्तविक नेटवर्क अनुरोध केवल इस अपडेट के बाद भेजें।

आशावादी अपडेट करने से पहले वर्तमान स्थिति सुरक्षित रखें: const previousItems = items। यही प्रति पिछली स्थिति बहाल करने का लक्ष्य है। API कॉल विफल होने पर आप इसी मान को वापस लाएँगे। इसे स्थिति के बजाय किसी चर में रखें, क्योंकि लंबित डेटा परिवर्तन की अवधि तक ही इसकी आवश्यकता है।

आशावादी अपडेट के बाद API कॉल अतुल्यकालिक रूप से करें। इसे try/catch में रखें। सफलता पर आप सर्वर की स्थिति के साथ समन्वय करने के लिए वैकल्पिक रूप से डेटा फिर से प्राप्त कर सकते हैं, या आशावादी स्थिति पर भरोसा कर सकते हैं यदि सर्वर वही डेटा लौटाएगा। विफलता पर पिछली स्थिति बहाल करने के लिए सुरक्षित रखे गए मान का उपयोग करें।

अपने डेटा परिवर्तन के catch ब्लॉक में: setItems(previousItems)। इससे स्थिति आशावादी अपडेट से पहले वाली स्थिति में लौट आती है। इसके बाद त्रुटि-सूचना दिखाएँ। उपयोगकर्ता समझते हैं कि दुर्लभ विफलताएँ हो सकती हैं—लेकिन वे ऐसी असंगति स्वीकार नहीं कर सकते जिसकी कोई जानकारी न दी गई हो।

पिछली स्थिति बहाल करने के बाद यह त्रुटि-संदेश दिखाएँ: "बदलाव सहेजे नहीं जा सके। कृपया फिर से प्रयास करें।" साथ में ऐसा पुनः प्रयास बटन दें जो उसी डेटा परिवर्तन को दोबारा शुरू करे। इससे उपयोगकर्ताओं को नियंत्रण मिलता है। पिछली स्थिति बहाल करना + त्रुटि-संदेश + पुनः प्रयास, पूरे यूज़र इंटरफ़ेस को अवरुद्ध किए बिना विफलता की स्थिति को सहजता से सँभालते हैं।

नई वस्तु आशावादी रूप से जोड़ते समय सर्वर ने अभी तक वास्तविक ID नहीं दी होती। आशावादी वस्तु के लिए एक अस्थायी ID बनाएँ: const tempId = crypto.randomUUID()। सूची में वस्तु की कुंजी के रूप में इसका उपयोग करें। API के सफल उत्तर के बाद अस्थायी ID को सर्वर द्वारा दी गई वास्तविक ID से बदल दें।

वस्तु बनाने का डेटा परिवर्तन सफल होने के बाद सर्वर वास्तविक ID के साथ उत्तर देता है। अस्थायी वस्तु को बदलने के लिए अपनी स्थिति अपडेट करें: setItems(prev => prev.map(item => item.id === tempId ? { ...item, id: serverResponse.id } : item))। यह समन्वय सुनिश्चित करता है कि आगे की कार्रवाइयों में सर्वर की सही ID का उपयोग हो।

यदि उपयोगकर्ता बहुत कम समय में दो डेटा परिवर्तन शुरू करता है, तो उत्तर गलत क्रम में आ सकते हैं। दूसरे डेटा परिवर्तन का उत्तर पहले आ सकता है और पहले परिवर्तन की विफलता पर पिछली स्थिति बहाल करना, दूसरे से प्राप्त सही स्थिति को अधिलेखित कर सकता है। यह आशावादी यूज़र इंटरफ़ेस से जुड़ी विशिष्ट क्रम-संघर्ष की समस्या है।

रेस स्थितियों से बचने का एक उपाय है: परिवर्तनों को कतार का उपयोग करके क्रमबद्ध करना। जब कोई परिवर्तन प्रगति में हो, तब कार्रवाई शुरू करने वाला बटन निष्क्रिय कर दें (isSubmitting स्थिति को सही पर सेट करके)। अगला परिवर्तन केवल पिछले परिवर्तन के पूरा होने के बाद ही चलने दें। इससे कुछ त्वरित प्रतिक्रिया का त्याग होता है, लेकिन स्थिति का सही क्रम सुनिश्चित होता है।

विलोपन कार्रवाइयों के लिए: पिछली वस्तुओं को सुरक्षित रखें, हटाए गए तत्व को स्थिति से निकालें, हटाने वाली API को कॉल करें और विफलता पर पुनर्स्थापन करें। विलोपन, जोड़ने की तुलना में सरल है (ID का मिलान करने की आवश्यकता नहीं होती), लेकिन वही सिद्धांत लागू होते हैं। API कॉल करने से पहले थोड़ी देर रुकने पर विचार करें और इस दौरान "पूर्ववत करें" विकल्प दिखाएँ।

मैन्युअल तरीका: previousItems को सुरक्षित रखें, नए स्थिति-मान के साथ setItems चलाएँ, API कॉल करें, और विफलता पर setItems(previousItems) के माध्यम से पुनर्स्थापन करके त्रुटि दिखाएँ। नए तत्व जोड़ते समय अस्थायी ID के रूप में crypto.randomUUID() का उपयोग करें और सफलता पर उसे सर्वर के ID से मिला दें। प्रगति में चल रहे परिवर्तनों के दौरान कार्रवाई शुरू करने वाला बटन निष्क्रिय करके रेस स्थितियों से बचें। विफलता की स्थिति में पुनर्स्थापन, सूचना और पुनः प्रयास मानक उपयोगकर्ता अनुभव है।