React Lists اور Keys میں مہارت حاصل کریں
React میں لسٹوں کو رینڈر کرنا آسان ہے، لیکن اسے صحیح طریقے سے کرنا مشکل ہے۔
بہت سے ڈویلپرز array index کو key کے طور پر استعمال کرتے ہیں۔ یہ ایک غلطی ہے۔ اس سے بگ (bugs) پیدا ہوتے ہیں اور کارکردگی (performance) سست ہو جاتی ہے۔
یہاں بتایا گیا ہے کہ آپ کو React میں ڈائنامک ڈیٹا کو کیسے سنبھالنا چاہیے۔
React لسٹوں کو کیسے استعمال کرتا ہے
React ایریز (arrays) کو UI عناصر میں تبدیل کرنے کے لیے map() میتھڈ کا استعمال کرتا ہے۔ جب آپ map() استعمال کرتے ہیں، تو React ڈیٹا کے ہر حصے کو ایک کمپوننٹ میں تبدیل کر دیتا ہے۔
Keys کا کردار
React ایک Virtual DOM استعمال کرتا ہے۔ جب ڈیٹا تبدیل ہوتا ہے، تو React نئے ڈیٹا کا پرانے ڈیٹا سے موازنہ کرتا ہے۔ اس عمل کو reconciliation کہا جاتا ہے۔
Keys منفرد شناختی标识 (unique identifiers) کے طور پر کام کرتی ہیں۔ وہ React کو بالکل درست طور پر بتاتی ہیں کہ کون سا آئٹم تبدیل ہوا، منتقل ہوا، یا ڈیلیٹ ہو گیا۔
Index کو Key کے طور پر استعمال کرنا کیوں خطرناک ہے
Index (0, 1, 2...) کو key کے طور پر استعمال کرنے سے تین اہم مسائل پیدا ہوتے ہیں:
- Component State Errors: اگر آپ کسی لسٹ کو ترتیب (sort) دیتے ہیں، تو ان پٹ فیلڈز یا چیک باکسز غلط آئٹم کا ڈیٹا دکھا سکتے ہیں۔
- Performance Drops: React یہ ٹریک نہیں کر سکتا کہ کون سا آئٹم کون سا ہے۔ یہ اکثر صرف ایک آئٹم کے بجائے پوری لسٹ کو دوبارہ رینڈر (re-render) کر دیتا ہے۔
- Visual Bugs: آپ کا UI درست نظر آ سکتا ہے، لیکن جب آئٹمز اپنی جگہ بدلتے ہیں تو اندرونی منطق (logic) ناکام ہو جائے گی۔
Keys استعمال کرنے کا صحیح طریقہ
اپنی ایپ کو تیز اور مستحکم رکھنے کے لیے، ان اصولوں پر عمل کریں:
- Unique IDs استعمال کریں: ہمیشہ اپنے ڈیٹا بیس سے IDs استعمال کریں (جیسے UUID یا primary key)۔
- کبھی بھی
Math.random()استعمال نہ کریں: رینڈر کے دوران keys تیار کرنے سے React ہر اپ ڈیٹ پر ہر ایک ایلیمنٹ کو دوبارہ تخلیق کرتا ہے۔ یہ کارکردگی کو تباہ کر دیتا ہے۔ - Keys کو مستحکم رکھیں: ایک key کو ڈیٹا کے ایک ہی حصے کے لیے اس کے پورے لائف سائیکل کے دوران ایک جیسا رہنا چاہیے۔
ایک نظر میں موازنہ
| خصوصیت (Feature) | Index کا استعمال | Unique ID کا استعمال |
|---|---|---|
| استحکام (Stability) | غیر مستحکم | انتہائی مستحکم |
| کارکردگی (Performance) | ناقص | بہترین |
| اسٹیٹ کی حفاظت (State Safety) | غیر محفوظ | 100% محفوظ |
ڈویلپرز کے لیے خلاصہ
map() میتھڈ استعمال کریں۔ key prop کو ایک منفرد اور مستحکم ID پاس کریں۔ ایسی کسی بھی لسٹ کے لیے array index استعمال کرنے سے گریز کریں جسے تبدیل، ترتیب (sort)، یا فلٹر کیا جا سکے۔