React ایپلی کیشنز کمپوننٹس سے بنی ہوتی ہیں، اور ہر کمپوننٹ اپنی ایک زندگی گزارتا ہے۔ یہ اسکرین پر ظاہر ہوتا ہے۔ یہ n پر ردعمل دیتا ہے۔

React ایپلی کیشنز کمپوننٹس سے مل کر بنتی ہیں، اور ہر کمپوننٹ کی اپنی ایک زندگی ہوتی ہے۔ یہ اسکرین پر ظاہر ہوتا ہے، نئی معلومات پر ردعمل دیتا ہے، اور آخر کار غائب ہو جاتا ہے۔ اس عمل کو نظر انداز کرنے کی قیمت بھاری پڑ سکتی ہے۔ میموری لیکس (memory leaks) پیدا ہونے لگتے ہیں، رینڈر پرفارمنس (render performance) گر جاتی ہے، اور صارفین ایسے بٹنوں پر کلک کرتے ہیں جو اب کام نہیں کرتے کیونکہ ان سے منسلک کمپوننٹ دس منٹ پہلے ہی ان ماؤنٹ (unmount) ہو چکا ہوتا ہے لیکن ایونٹ لسنر (event listener) اب بھی زندہ ہوتا ہے۔ کمپوننٹ لائف سائیکل (component lifecycle) کو سمجھنا محض ایک علمی مشق نہیں ہے، بلکہ یہ ایسا سافٹ ویئر لکھنے کی بنیاد ہے جو حقیقی استعمال کے دوران قابل بھروسہ رہے۔

ایک کمپوننٹ کے وجود کو تین مراحل میں سوچیں۔ ڈویلپرز اکثر انہیں پیدائش، نشوونما، اور موت کے طور پر بیان کرتے ہیں۔ React انہیں mounting، updating، اور unmounting کہتا ہے۔ ہر مرحلے کا ایک مخصوص کام ہے، اور ہر مرحلہ آپ کو کوڈ چلانے یا اسے صاف کرنے (clean up) کے لیے ایک درست لمحہ فراہم کرتا ہے۔

تین مراحل

Mounting پیدائش ہے۔ کمپوننٹ پہلی بار بنایا جاتا ہے اور براؤزر DOM میں شامل کیا جاتا ہے۔ یہ آپ کا سیٹ اپ (setup) کا وقت ہے۔ اگر کمپوننٹ کو ریموٹ ڈیٹا کی ضرورت ہے، تو یہ وہی وقت ہے جب آپ اسے ریکویسٹ کرتے ہیں۔ اگر اسے props سے حاصل کردہ ابتدائی اسٹیٹ (initial state) کی ضرورت ہے، تو آپ وہ یہاں کرتے ہیں۔ کلاس کمپوننٹ کے دور میں، یہ componentDidMount کا دائرہ کار تھا۔ جدید فنکشنل کمپوننٹس کے ساتھ، آپ اسے useEffect اور ایک خالی dependency array کے ذریعے ہینڈل کرتے ہیں۔ اہم تفصیل یہ ہے کہ کوڈ کا یہ بلاک صرف ایک بار چلتا ہے، جیسے ہی React اس ایلیمنٹ کو پیج پر رکھتا ہے۔ یہ اسے ایک بار کے سیٹ اپ کے لیے مثالی بناتا ہے، جیسے یوزر پروف حاصل کرنا یا localStorage سے کوئی ویلیو پڑھنا۔

Updating نشوونما ہے۔ ایک ماؤنٹ شدہ کمپوننٹ ساکن نہیں رہتا۔ پیرنٹ (parent) سے props آتے ہیں۔ یوزر کے انٹرایکشن سے اسٹیٹ (state) تبدیل ہوتی ہے۔ خود پیرنٹ دوبارہ رینڈر (re-render) ہوتا ہے، جس سے چائلڈ (child) کو بھی ایسا کرنے پر مجبور ہونا پڑتا ہے۔ پھر React کمپوننٹ کو دوبارہ رینڈر کرتا ہے تاکہ UI آپ کے ڈیٹا کے ساتھ ہم آہنگ رہے۔ یہ مرحلہ کمپوننٹ کی زندگی کے دوران کئی بار دہرایا جاتا ہے۔ ہر بار جب کوئی dependency بدلتی ہے، آپ کے effects دوبارہ چلتے ہیں، اور کمپوننٹ DOM میں نیا آؤٹ پٹ فراہم کرتا ہے۔ چونکہ یہ مرحلہ بہت کثرت سے ہوتا ہے، اس لیے زیادہ تر پرفارمنس کے مسائل بھی یہیں سے شروع ہوتے ہیں۔ یہاں ہونے والا غیر ضروری کام تیزی سے بڑھتا جاتا ہے۔

Unmounting موت ہے۔ کمپوننٹ اسکرین سے ہٹ جاتا ہے، شاید اس لیے کہ صارف کسی دوسرے پیج پر چلا گیا یا کنڈیشنل رینڈر (conditional render) نے اسے بند کر دیا۔ اس مقام پر، کمپوننٹ ختم ہو جاتا ہے، لیکن بیرونی دنیا کو ہمیشہ اس کا علم نہیں ہوتا۔ ٹائمرز (timers) چلتے رہتے ہیں۔ WebSockets سنتے رہتے ہیں۔ window آبجیکٹ پر ایونٹ لسنرز جڑے رہتے ہیں۔ اگر آپ انہیں صاف (clean up) نہیں کرتے، تو وہ مردہ کمپوننٹس کے حوالے (references) رکھتے ہیں اور میموری لیک (memory leak) کا باعث بنتے ہیں۔ براؤزر ان "بھوتوں" پر سائیکل ضائع کرتا ہے۔ React آپ کو ایک cleanup function بالکل اسی لیے دیتا ہے تاکہ آپ کمپوننٹ کے مکمل طور پر غائب ہونے سے پہلے انٹرویلز (intervals) روک سکیں، کنکشنز بند کر سکیں، اور لسنرز کو ہٹا سکیں۔

کلاس میتھڈز سے Hooks تک

برسوں تک، React انجینئرز نے ان مراحل کو کلاس کمپوننٹس کے ذریعے مینیج کیا۔ لاجک (logic) مختلف میتھڈز میں تقسیم تھی۔ آپ componentDidMount کے اندر ڈیٹا حاصل کرتے تھے، componentDidUpdate کے اندر prop کی تبدیلیوں کا جواب دیتے تھے، اور componentWillUnmount کے اندر صفائی کرتے تھے۔ مسئلہ یہ تھا کہ متعلقہ لاجک بکھر جاتی تھی۔ ایک ہی فیچر، جیسے لائیو چیٹ کنکشن، کو صرف کنیکٹ کرنے، تھریڈ کی تبدیلیوں کو چیک کرنے اور ڈس کنیکٹ کرنے کے لیے تین الگ الگ لائف سائیکل میتھڈز میں کوڈ کی ضرورت ہوتی تھی۔

Hooks نے یہ سب بدل دیا۔ فنکشنل کمپوننٹس میں useEffect ہوک آپ کو لائف سائیکل مرحلے کے بجائے مقصد کے لحاظ سے لاجک کو گروپ کرنے کی اجازت دیتا ہے۔ پھر بھی، اگر آپ کو معلوم ہو کہ کہاں دیکھنا ہے، تو ذہنی ماڈل (mental model) آسانی سے سمجھ آ جاتا ہے۔

ماؤنٹنگ کو ہینڈل کرنے کے لیے، useEffect(() => { ... }, []) لکھیں۔ خالی dependency array React کو بتاتا ہے کہ اس effect کی کوئی بیرونی dependencies نہیں ہیں، اس لیے یہ صرف ابتدائی رینڈر کے بعد چلتا ہے۔ یہ componentDidMount کی جگہ لے لیتا ہے۔

اپڈیٹس کو ہینڈل کرنے کے لیے، وہ مخصوص ویلیوز شامل کریں جن پر React نظر رکھنا چاہیے: useEffect(() => { ... }, [dependency])۔ جب رینڈرز کے درمیان dependency تبدیل ہوتی ہے،