آپ کو React Key Prop کی ضرورت کیوں ہے
آپ کو اپنے کنسول میں یہ ایرر نظر آتا ہے: "Each child in a list should have a unique 'key' prop."
بہت سے ڈویلپرز اسے نظر انداز کر دیتے ہیں۔ یہ ایک غلطی ہے۔ یہ وارننگ آپ کو کارکردگی (performance) کے مسائل اور ممکنہ بگ (bugs) کے بارے میں بتاتی ہے۔
key prop کیا ہے؟ یہ React کو ایک لسٹ میں مخصوص آئٹمز کی شناخت کرنے میں مدد دیتا ہے۔ یہ React کو بتاتا ہے کہ کون سا آئٹم تبدیل ہوا، منتقل ہوا، یا ہٹا دیا گیا۔ key کے بغیر، React ہر بار کچھ بھی تبدیل ہونے پر پوری لسٹ کو دوبارہ رینڈر (re-render) کرتا ہے۔ اس سے آپ کی ایپ سست ہو جاتی ہے۔
1000 کتابوں والی ایک لائبریری کا تصور کریں۔ اگر آپ درمیان میں ایک نئی کتاب شامل کرتے ہیں، تو آپ کو جگہ بنانے کے لیے ہر دوسری کتاب کو منتقل کرنا پڑے گا۔ ایک key ہر کتاب کے لیے ایک منفرد ID کے طور پر کام کرتی ہے۔ یہ React کو باقی سب کچھ ہٹائے بغیر بالکل صحیح جگہ تلاش کرنے کی اجازت دیتی ہے۔
Reconciliation کا عمل React نئے Virtual DOM کا پرانے کے ساتھ موازنہ کرنے کے لیے ایک diffing algorithm استعمال کرتا ہے۔
- State تبدیل ہوتی ہے۔
- React ایک نیا tree بناتا ہے۔
- React keys کا استعمال کرتے ہوئے trees کا موازنہ کرتا ہے۔
- React صرف تبدیل شدہ عناصر (elements) کو اپ ڈیٹ کرتا ہے۔
عام غلطی: Array index کو key کے طور پر استعمال کرنا۔
اگر آپ کی لسٹ تبدیل ہوتی ہے تو کبھی بھی key={index} استعمال نہ کریں۔ اگر آپ آئٹمز شامل یا حذف کرتے ہیں، تو ہر آئٹم کا index بدل جاتا ہے۔ React الجھن کا شکار ہو جائے گا اور ان آئٹمز کو دوبارہ رینڈر کرے گا جو اصل میں تبدیل نہیں ہوئے تھے۔ اس سے میموری ضائع ہوتی ہے اور UI bugs پیدا ہوتے ہیں۔
اسے کیسے ٹھیک کریں:
- اپنے ڈیٹا بیس سے ایک مستحکم (stable) ID استعمال کریں (جیسے
user.id)۔ - اگر آپ کے ڈیٹا میں ID نہیں ہے تو
uuidجیسی منفرد اسٹرنگ استعمال کریں۔ - Keys کے لیے
Math.random()سے پرہیز کریں۔ یہ ہر رینڈر پر ایک نئی ID بناتا ہے، جس سے components کو دوبارہ re-mount ہونا پڑتا ہے اور UI میں جھٹکے (flickering) محسوس ہوتے ہیں۔
بہترین طریقے (Best practices):
- Keys مستحکم ہونی چاہئیں۔
- Keys اپنے بہن بھائیوں (siblings) کے درمیان منفرد ہونی چاہئیں۔
- بہترین کارکردگی کے لیے ڈیٹا بیس IDs استعمال کریں۔
Key موازنہ ٹیبل: • Database ID: تجویز کردہ۔ مستحکم اور تیز۔ • Array Index: تجویز نہیں کیا جاتا۔ Sorting یا filtering کے دوران بگ پیدا کرتا ہے۔ • Math.random(): پرہیز کریں۔ غیر ضروری re-mounts کا باعث بنتا ہے۔
آپ کے ورک فلو کے لیے خلاصہ: اگر آپ کو یہ ایرر نظر آئے، تو اس کا مطلب ہے کہ آپ کے components میں مستقل شناخت کنندہ (identifier) کی کمی ہے۔ اپنے API response میں email یا ID جیسے منفرد فیلڈز چیک کریں۔ غیر ضروری re-renders سے 30-40% بچت کے لیے اسے ٹھیک کریں۔