మీరు జాబితాను render చేసినప్పుడు, React ఏ అంశం ఏది అనేది render ల మధ్య తెలుసుకోవాలి, తద్వారా DOM nodes లను సరిగ్గా పునర్వినియోగం చేయవచ్చు, పునర్వ్యవస్థీకరించవచ్చు, చేర్చవచ్చు లేదా తొలగించవచ్చు. key ఆ identity.
{users.map(user => (
<Row key={user.id} user={user} />
))}
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళంkey గా index ను ఉపయోగించడం React కు "position 0 లో ఉన్న అంశం ఇంతకు ముందు ఉన్న అదే అంశం" — జాబితా పునర్వ్యవస్థీకరించినప్పుడు లేదా ముందు నుండి చేర్చినప్పుడు/తొలగించినప్పుడు వెంటనే విచ్ఛిన్నమవుతుంది:
// 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.
ఒక నిజమైన లక్షణం: input ల జాబితా ఇక్కడ ఒక వరుసలో typing చేయడం తొలగించిన/ఆర్డర్ చేసిన తర్వాత మరొక వరుసకు "లేపుకుపోతుంది", ఎందుకంటే React తప్పు <input> ను పునర్వినియోగం చేసింది (మరియు దాని అంతర్గత value/focus).
user.id, slug).Keys reconciliation algorithm కు ఒక సూచన; వాటిని సరిగ్గా పొందడం పనితీరు మరియు component state రెండింటినీ సరిగ్గా ఉంచుతుంది.