జాబితా అంశాలకు ఎందుకు key అవసరమైనది, మరియు ఎందుకు index ను ఉపయోగించకూడదు?

Question

IT Interview Practice · Accepted Answer

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

Array index ఎందుకు ప్రమాదకరం

నియమాలు

సంబంధిత ప్రశ్నలు