𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀 کے ذریعے 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 کو روکیں
ویب ایپس میں صارفین بہت تیزی سے کام کرتے ہیں۔ یہ رفتار ڈویلپرز کے لیے دو اہم مسائل پیدا کرتی ہے۔
پہلا مسئلہ "unmounted component trap" ہے۔ ایک صارف ڈیٹا حاصل کرنے کے لیے بٹن پر کلک کرتا ہے۔ ریکویسٹ میں چار سیکنڈ لگتے ہیں۔ دو سیکنڈ کے بعد، صارف 'back' پر کلک کرتا ہے اور صفحہ چھوڑ دیتا ہے۔ ریکویسٹ پس منظر (background) میں جاری رہتی ہے۔ جب ڈیٹا پہنچتا ہے، تو کوڈ ایک ایسے کمپوننٹ کو اپ ڈیٹ کرنے کی کوشش کرتا ہے جو اب موجود نہیں ہے۔ اس سے memory leaks پیدا ہوتے ہیں۔
دوسرا مسئلہ "race condition" ہے۔ یہ اکثر سرچ بارز میں ہوتا ہے۔
- ایک صارف "A" ٹائپ کرتا ہے۔ Request 1 شروع ہوتی ہے۔
- ایک صارف "AB" ٹائپ کرتا ہے۔ Request 2 شروع ہوتی ہے۔
- Request 2 پہلے مکمل ہوتی ہے اور درست ڈیٹا دکھاتی ہے۔
- Request 1 دیر سے مکمل ہوتی ہے اور پرانے ڈیٹا کے ساتھ اسکرین کو اوور رائٹ (overwrite) کر دیتی ہے۔
آپ AbortController API کے ذریعے دونوں مسائل حل کر سکتے ہیں۔ یہ ٹول آپ کو نیٹ ورک ریکویسٹ کو اس وقت روکنے کی اجازت دیتا ہے جب اس کی مزید ضرورت نہ ہو۔
اسے کیسے نافذ (implement) کریں:
- اپنے
useEffectکے اندر ایک نیاAbortControllerبنائیں۔ - اپنے
fetchریکویسٹ میںcontroller signalپاس کریں۔ - ایرر کو ہینڈل کرنے کے لیے
try/catchبلاک کا استعمال کریں۔ - جان بوجھ کر کیے گئے کینسلزیشنز (cancellations) کو نظر انداز کرنے کے لیے چیک کریں کہ آیا ایرر کا نام
AbortErrorہے۔ controller.abort()کو کال کرنے کے لیے اپنےuseEffectمیں ایک cleanup function واپس (return) کریں۔
یہ پیٹرن اس وقت کام کرتا ہے جب کوئی کمپوننٹ unmount ہوتا ہے یا جب کوئی dependency تبدیل ہوتی ہے۔
اس طریقہ کار کے فوائد:
- آپ پرانے ڈیٹا کو نئے ڈیٹا کو اوور رائٹ کرنے سے روکتے ہیں۔
- آپ اپنی React ایپ میں memory leaks سے بچتے ہیں۔
- آپ براؤزر کے نیٹ ورک کنکشنز کو آزاد (free up) کرتے ہیں۔
- آپ کی ایپلی کیشن قابلِ پیش گوئی (predictable) اور مستحکم رہتی ہے۔
ماخذ (Source): https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899