جال سے بچنا: React Hooks میں Stale Closures کو ٹھیک کرنا
React میں stale closures کی وجہ سے خاموشی سے ڈیٹا کا نقصان ہو سکتا ہے۔
آپ ایک ڈیش بورڈ بناتے ہیں جس میں بیک گراؤنڈ ٹائمر ہوتا ہے۔ آپ ہر 5 سیکنڈ بعد ڈیٹا کو خودکار طریقے سے محفوظ کرنے کے لیے useEffect ہک کے اندر setInterval کا استعمال کرتے ہیں۔
بگ (bug) تب ہوتا ہے جب انٹرویل (interval) چلتا ہے۔ اگر صارف نے پورا صفحہ لکھا بھی ہو، تب بھی یہ ایک خالی دستاویز محفوظ کر لیتا ہے۔ انٹرویل ماضی میں ہی پھنسا رہتا ہے اور آپ کے اسٹیٹ (state) کا پرانا ورژن استعمال کرتا ہے۔
The Problem
جب useEffect چلتا ہے، تو یہ اپنے اسکوپ (scope) میں موجود ویری ایبلز کو کیپچر کر لیتا ہے۔
- اگر آپ اسٹیٹ کو dependency array سے باہر رکھتے ہیں، تو انٹرویل پہلے رینڈر (render) والی اسٹیٹ استعمال کرتا ہے۔
- اگر آپ اسٹیٹ کو dependency array میں شامل کرتے ہیں، تو React ہر کی اسٹروک (keystroke) پر انٹرویل کو دوبارہ شروع کر دیتا ہے۔ اس سے کارکردگی (performance) متاثر ہوتی ہے اور آپ کا ٹائمنگ سسٹم خراب ہو جاتا ہے۔
The Solution: The Mutable Ref Pattern
آپ کو ٹائمر کو ڈیٹا سے الگ کرنا ہوگا۔ اپنی تازہ ترین اسٹیٹ کا مستقل حوالہ (constant reference) رکھنے کے لیے useRef ہک کا استعمال کریں۔ یہ ری-رینڈرز (re-renders) سے بچاتا ہے اور آپ کے انٹرویل کو مستحکم رکھتا ہے۔
How to implement it:
- اپنی تازہ ترین اسٹیٹ کو رکھنے کے لیے ایک
refبنائیں۔ - جب بھی آپ کی اسٹیٹ تبدیل ہو، اس
refکو اپ ڈیٹ کرنے کے لیےuseEffectکا استعمال کریں۔ - اپنے انٹرویل کو ایک خالی dependency array کے ساتھ شروع کریں تاکہ یہ صرف ایک بار چلے۔
- اپنے انٹرویل کال بیک (callback) کے اندر
refتک رسائی حاصل کریں۔
یہ طریقہ اس بات کو یقینی بناتا ہے کہ آپ کے بیک گراؤنڈ ٹاسک ہمیشہ تازہ ڈیٹا استعمال کریں۔ یہ آپ کے UI کو تیز اور آپ کے ڈیٹا کو محفوظ رکھتا ہے۔
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7