React Hooks میں Stale Closures کو درست کریں
آپ React useEffect hook میں ایک ٹائمر بناتے ہیں۔ آپ ہر پانچ سیکنڈ بعد ایک دستاویز کو خودکار طور پر محفوظ (auto-save) کرنا چاہتے ہیں۔ ٹائمر چلتا تو ہے، لیکن یہ ایک خالی دستاویز محفوظ کر دیتا ہے۔ صارف نے دس پیراگراف لکھے ہوتے ہیں، لیکن ٹائمر کو کچھ نظر نہیں آتا۔
یہ ایک stale closure ہے۔
useEffect hook پہلے render سے variables کو capture کر لیتا ہے۔ اگر آپ state کو dependency array سے باہر چھوڑ دیتے ہیں، تو ٹائمر ماضی میں ہی پھنسا رہتا ہے۔ یہ آپ کے ڈیٹا کا پرانا ورژن استعمال کرتا ہے۔
اگر آپ state کو dependency array میں شامل کر دیتے ہیں، تو ہر بار جب صارف کوئی حرف ٹائپ کرتا ہے، ٹائمر ری سیٹ ہو جاتا ہے۔ اس سے performance متاثر ہوتی ہے اور آپ کا timing logic خراب ہو جاتا ہے۔
آپ اسے Mutable Ref Pattern کے ذریعے حل کر سکتے ہیں۔
اپنی تازہ ترین state کو محفوظ رکھنے کے لیے useRef hook کا استعمال کریں۔ یہ آپ کے ٹائمر کو نئے renders شروع کیے بغیر یا interval کو ری سیٹ کیے بغیر تازہ ڈیٹا تک رسائی فراہم کرتا ہے۔
ان مراحل پر عمل کریں:
- اپنی state کو محفوظ رکھنے کے لیے ایک ref بنائیں۔
- ref کو اپنی state کے ساتھ sync کرنے کے لیے useEffect کا استعمال کریں۔
- اپنے interval کو ایک خالی dependency array کے ساتھ سیٹ کریں تاکہ یہ صرف ایک بار چلے۔
- interval callback کے اندر ref تک رسائی حاصل کریں۔
یہ طریقہ کار آپ کے ٹائمر کو آپ کے ڈیٹا سے decouple کر دیتا ہے۔ آپ کے background tasks مستحکم رہتے ہیں۔ آپ کا ڈیٹا درست رہتا ہے۔
خاموش bugs کی وجہ سے صارف کا ڈیٹا ضائع کرنا بند کریں۔ اپنے asynchronous tasks کو UI کے ساتھ sync رکھنے کے لیے refs کا استعمال کریں۔
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7