جلوگیری از Race Conditionها با استفاده از AbortController در React
کاربران در اپلیکیشنهای وب با سرعت بالا حرکت میکنند. این سرعت دو مشکل اصلی برای توسعهدهندگان ایجاد میکند.
مشکل اول، تلهی کامپوننتهای Unmounted است. کاربر برای دریافت دادهها روی یک دکمه کلیک میکند. درخواست چهار ثانیه طول میکشد. پس از دو ثانیه، کاربر دکمه بازگشت را میزند و صفحه را ترک میکند. درخواست همچنان در پسزمینه ادامه مییابد. وقتی دادهها میرسند، کد سعی میکند کامپوننتی را بهروزرسانی کند که دیگر وجود ندارد. این امر باعث نشت حافظه (memory leaks) میشود.
مشکل دوم، Race Condition است. این اتفاق اغلب در نوار جستجو (search bars) رخ میدهد.
- کاربر عبارت "A" را تایپ میکند. درخواست ۱ شروع میشود.
- کاربر عبارت "AB" را تایپ میکند. درخواست ۲ شروع میشود.
- درخواست ۲ زودتر تمام شده و دادههای صحیح را نمایش میدهد.
- درخواست ۱ با تأخیر تمام شده و صفحه را با دادههای قدیمی بازنویسی (overwrite) میکند.
شما میتوانید هر دو مشکل را با استفاده از AbortController API حل کنید. این ابزار به شما اجازه میدهد یک درخواست شبکه را زمانی که دیگر مورد نیاز نیست، متوقف کنید.
نحوه پیادهسازی:
- یک
AbortControllerجدید درونuseEffectخود ایجاد کنید. signalمربوط به کنترلر را به درخواستfetchخود پاس دهید.- از یک بلوک
try/catchبرای مدیریت خطا استفاده کنید. - بررسی کنید که آیا نام خطا
AbortErrorاست یا خیر، تا لغوهای عمدی را نادیده بگیرید. - یک تابع پاکسازی (cleanup function) در
useEffectخود برگردانید تاcontroller.abort()را فراخوانی کند.
این الگو زمانی کار میکند که یک کامپوننت unmount شود یا زمانی که یک وابستگی (dependency) تغییر کند.
مزایای این روش:
- از بازنویسی دادههای جدید توسط دادههای قدیمی جلوگیری میکنید.
- از نشت حافظه (memory leaks) در اپلیکیشن React خود جلوگیری میکنید.
- اتصالات شبکه مرورگر را آزاد میکنید.
- اپلیکیشن شما قابل پیشبینی و پایدار باقی میماند.
منبع: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899