किन list items लाई key चाहिन्छ, र किन index प्रयोग गर्न सकिंदैन?

Question

Accepted Answer

जब तपाई एउटा list render गर्नुहुन्छ, React लाई **कुन item कुन हो** भनेर जान्न आवश्यक छ ताकि यो renders बीचमा DOM nodes लाई सही तरीकाले पुन: प्रयोग गर्न, पुन: अर्डर गर्न, insert गर्न वा delete गर्न सक्छ। **`key`** त्यो identity हो। ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Array index किन जोखिमपूर्ण छ Index लाई key को रूपमा प्रयोग गर्नु React लाई भन्न जस्तो हो "position 0 मा रहेको item अघिलो जस्तो नै छ" — जुन तुरुन्तै टुट्छ जब list reorder हुन्छ, वा तपाई front बाट insert/remove गर्नुहुन्छ: ```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 को एक list जहाँ एक row मा typing गर्दा delete/sorting पछि अर्को row मा "jump" हुन्छ, किनभने React ग़लत `` (र यसको internal value/focus) लाई पुन: प्रयोग गर्यो। ## Rules - आपनो data बाट **स्थिर, अद्वितीय** id प्रयोग गर्नुहोस् (`user.id`, एक slug)। - Index **केवल** तब स्वीकार्य छ जब list कहिले reorder, insert, वा delete हुँदैन। - Keys **siblings** मा अद्वितीय हुनुपर्छ (विश्वव्यापी रूपमा होइन)। Keys reconciliation algorithm को लागि एक संकेत हुन्; तिनलाई सही राख्नु performance र component state दुवै सही राखे।