React AbortController ব্যবহার করে Race Condition বন্ধ করুন
ওয়েব অ্যাপে ব্যবহারকারীরা খুব দ্রুত কাজ করেন। এই গতির কারণে ডেভেলপারদের জন্য দুটি প্রধান সমস্যা তৈরি হয়।
প্রথম সমস্যাটি হলো unmounted component trap। একজন ব্যবহারকারী ডেটা fetch করার জন্য একটি বাটনে ক্লিক করেন। রিকোয়েস্টটি সম্পন্ন হতে চার সেকেন্ড সময় লাগে। দুই সেকেন্ড পর, ব্যবহারকারী 'back' বাটনে ক্লিক করে পেজটি ছেড়ে চলে যান। রিকোয়েস্টটি ব্যাকগ্রাউন্ডে চলতে থাকে। যখন ডেটাটি আসে, কোডটি এমন একটি component আপডেট করার চেষ্টা করে যা আর নেই। এর ফলে memory leaks ঘটে।
দ্বিতীয় সমস্যাটি হলো race condition। এটি প্রায়ই সার্চ বারে ঘটে থাকে।
- একজন ব্যবহারকারী "A" টাইপ করেন। Request 1 শুরু হয়।
- একজন ব্যবহারকারী "AB" টাইপ করেন। Request 2 শুরু হয়।
- Request 2 আগে শেষ হয় এবং সঠিক ডেটা দেখায়।
- Request 1 দেরিতে শেষ হয় এবং স্ক্রিনে পুরনো ডেটা দিয়ে ওভাররাইট করে ফেলে।
আপনি AbortController API ব্যবহার করে এই দুটি সমস্যাই সমাধান করতে পারেন। এই টুলটি আপনাকে কোনো নেটওয়ার্ক রিকোয়েস্ট আর প্রয়োজন না হলে তা বন্ধ করতে সাহায্য করে।
এটি কীভাবে ইমপ্লিমেন্ট করবেন:
- আপনার
useEffect-এর ভেতরে একটি নতুনAbortControllerতৈরি করুন। - আপনার
fetchরিকোয়েস্টেcontroller.signalপাস করুন। - এরর হ্যান্ডেল করার জন্য একটি
try/catchব্লক ব্যবহার করুন। - ইচ্ছাকৃতভাবে করা cancellation গুলো এড়িয়ে যেতে এরর নেম (error name)
AbortErrorকি না তা চেক করুন। controller.abort()কল করার জন্য আপনারuseEffect-এ একটি cleanup function রিটার্ন করুন।
এই প্যাটার্নটি তখন কাজ করে যখন কোনো component unmount হয় অথবা যখন কোনো dependency পরিবর্তন হয়।
এই পদ্ধতির সুবিধাগুলো:
- আপনি পুরনো ডেটা দিয়ে নতুন ডেটা ওভাররাইট হওয়া বন্ধ করতে পারেন।
- আপনি আপনার React অ্যাপে memory leaks প্রতিরোধ করতে পারেন।
- আপনি ব্রাউজারের নেটওয়ার্ক কানেকশনগুলো মুক্ত করতে পারেন।
- আপনার অ্যাপ্লিকেশনটি আরও প্রেডিক্টেবল (predictable) এবং স্থিতিশীল থাকে।
Source: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899