𝗦𝘁𝗼𝗽 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 𝗪𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀
वेब ॲप्समध्ये वापरकर्ते वेगाने काम करतात. या वेगामुळे डेव्हलपर्ससमोर दोन मुख्य समस्या निर्माण होतात.
पहिली समस्या म्हणजे 'unmounted component trap'. वापरकर्ता डेटा मिळवण्यासाठी (fetch करण्यासाठी) बटणावर क्लिक करतो. विनंतीला (request) चार सेकंद लागतात. दोन सेकंदांनंतर, वापरकर्ता 'back' बटणावर क्लिक करतो आणि पेज सोडून जातो. परंतु, ती विनंती बॅकग्राउंडमध्ये सुरूच राहते. जेव्हा डेटा येतो, तेव्हा कोड अशा कंपोनंटला अपडेट करण्याचा प्रयत्न करतो जो आता अस्तित्वात नाही. यामुळे 'memory leaks' होतात.
दुसरी समस्या म्हणजे 'race condition'. हे सहसा सर्च बारमध्ये घडते.
- वापरकर्ता "A" टाईप करतो. Request 1 सुरू होते.
- वापरकर्ता "AB" टाईप करतो. Request 2 सुरू होते.
- Request 2 आधी पूर्ण होते आणि योग्य डेटा दाखवते.
- Request 1 उशिरा पूर्ण होते आणि जुन्या डेटाने स्क्रीन ओव्हरराईट (overwrite) करते.
तुम्ही AbortController API वापरून या दोन्ही समस्या सोडवू शकता. हे टूल तुम्हाला नेटवर्क विनंती (network request) जेव्हा आवश्यक नसेल तेव्हा ती थांबवण्याची परवानगी देते.
याची अंमलबजावणी कशी करावी:
- तुमच्या
useEffectमध्ये एक नवीनAbortControllerतयार करा. - तुमच्या
fetchविनंतीलाcontroller signalपास करा. - एरर हाताळण्यासाठी
try/catchब्लॉक वापरा. - मुद्दाम केलेल्या कॅन्सलेशनला (intentional cancellations) दुर्लक्षित करण्यासाठी एररचे नाव
AbortErrorआहे का ते तपासा. controller.abort()कॉल करण्यासाठी तुमच्याuseEffectमध्ये एक cleanup function रिटर्न करा.
जेव्हा एखादा कंपोनंट अनमाउंट (unmount) होतो किंवा जेव्हा एखादी डिपेंडन्सी (dependency) बदलते, तेव्हा ही पद्धत काम करते.
या पद्धतीचे फायदे:
- तुम्ही जुना डेटा नवीन डेटा ओव्हरराईट करण्यापासून रोखू शकता.
- तुम्ही तुमच्या React ॲपमध्ये 'memory leaks' टाळू शकता.
- तुम्ही ब्राउझरमधील नेटवर्क कनेक्शन्स मोकळी करू शकता.
- तुमचे ॲप्लिकेशन अधिक प्रेडिक्टेबल (predictable) आणि स्थिर राहते.
Source: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899