فہرست کی چیزوں کو کلید کی ضرورت کیوں ہے، اور انڈیکس استعمال کیوں نہ کریں؟

Question

Accepted Answer

جب آپ فہرست کو render کرتے ہیں، تو React کو **کون سی چیز کون سی ہے** اس کو render کے دوران جاننے کا طریقہ ضروری ہے تاکہ یہ DOM نوڈز کو صحیح طریقے سے دوبارہ استعمال، دوبارہ ترتیب، داخل یا حذف کر سکے۔ **`key`** وہی شناخت ہے۔ ```jsx {users.map(user => ( // stable, unique id ))} ``` ## انڈیکس کیوں خطرناک ہے انڈیکس کو کلید کے طور پر استعمال کرنا React کو بتاتا ہے "position 0 پر چیز پہلے جیسی ہے" — جو فوری طور پر ٹوٹ جاتا ہے جب فہرست دوبارہ ترتیب دی جائے، یا آپ سامنے سے شامل/حذف کریں: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` ایک حقیقی علامت: inputs کی فہرست جہاں ایک قطار میں ٹائپ کرنا حذف/ترتیب کے بعد دوسری قطار میں "کود جاتا ہے"، کیونکہ React نے غلط `` کو دوبارہ استعمال کیا (اور اس کی اندرونی value/focus)۔ ## اصول - اپنے ڈیٹا سے **مستحکم، منفرد** id استعمال کریں (`user.id`، slug)۔ - انڈیکس **صرف** static فہرست کے لیے قابل قبول ہے جو کبھی بھی دوبارہ ترتیب، داخل یا حذف نہیں ہوتی۔ - کلیدیں **بہن بھائی** میں منفرد ہونی ضروری ہیں (عالمی طور پر نہیں)۔ کلیدیں reconciliation algorithm کے لیے ایک اشارہ ہیں؛ انہیں صحیح طریقے سے حاصل کرنا کارکردگی اور component state دونوں کو درست رکھتا ہے۔