React को list items पर key क्यों चाहिए, और array index इस्तेमाल करने पर असल में क्या टूटता है?

keys React को बताती हैं कि नई list का कौन सा element पुरानी list के किस element से मेल खाता है, ताकि वह सिर्फ जगह से मिलान करने की जगह DOM nodes और उनकी state को हिला सके, रख सके या हटा सके। array index सिर्फ स्थिर lists पर चलते हैं। अगर items का क्रम बदले, शुरू में कोई जुड़े या कोई हटे, तो किसी item का index बदल जाता है, React गलत node दोबारा इस्तेमाल कर लेता है, और input की values जैसी state गलत row पर जा गिरती है।

key वह तरीका है जिससे React इस सवाल का जवाब देता है कि क्या यह वही item है जो पिछले render में दिखा था। उसके बिना वह children को जगह से जोड़ता है, तो जब कोई row हिलती है तो React समझता है कि सामग्री बदल गई और उसे हिलाने की जगह मौजूदा node को patch कर देता है। स्थिर key के साथ उसे पता होता है कि item हिला है, वह उसका DOM node और उसकी state रखे रहता है, और क्रम बदल देता है। index का जाल यह है कि index जगह बताता है, item नहीं। मैं इससे एक table पर टकराया जहां हर row में एक checkbox और एक notes field था। दूसरी row हटाइए और उसके नीचे की हर row एक index ऊपर खिसक जाती है, तो React गलत nodes जोड़ देता है और आपकी row में किसी और के notes आ बैठते हैं। यह data का bug लगता है और है key का bug। तो मैं वही स्थिर id इस्तेमाल करता हूं जो data के साथ आती है, आम तौर पर database की id। अगर सच में कोई नहीं है, तो मैं item बनते वक्त एक id बना देता हूं, render के दौरान नहीं, क्योंकि render में बनाने से हर दौर में नई key मिलती है और पूरी list दोबारा mount हो जाती है।