పనితీరును మెరుగుపరచడం: జాబితా ఆప్టిమైజేషన్ కోసం రియాక్ట్ రికన్సిలియేషన్ కీస్‌పై ఒక లోతైన విశ్లేషణ

ఆధునిక వెబ్ డెవలప్‌మెంట్ ప్రపంచంలో, డేటా మార్పులకు వేగంగా స్పందించే డైనమిక్ యూజర్ ఇంటర్‌ఫేస్‌లను సృష్టించడం చాలా ముఖ్యం. రియాక్ట్, దాని కాంపోనెంట్-ఆధారిత ఆర్కిటెక్చర్ మరియు డిక్లరేటివ్ స్వభావంతో, ఈ ఇంటర్‌ఫేస్‌లను నిర్మించడానికి ప్రపంచవ్యాప్త ప్రమాణంగా మారింది. రియాక్ట్ యొక్క సామర్థ్యం వెనుక ఉన్న గుండెలాంటి ప్రక్రియను రికన్సిలియేషన్ అంటారు, ఇందులో వర్చువల్ DOM ఉంటుంది. అయితే, అత్యంత శక్తివంతమైన సాధనాలను కూడా అసమర్థంగా ఉపయోగించవచ్చు, మరియు కొత్త మరియు అనుభవజ్ఞులైన డెవలపర్‌లు ఇద్దరూ తడబడే ఒక సాధారణ ప్రాంతం జాబితాల రెండరింగ్.

మీరు బహుశా data.map(item => <div>{item.name}</div>) వంటి కోడ్‌ను లెక్కలేనన్ని సార్లు రాసి ఉంటారు. ఇది చాలా సులభంగా, దాదాపుగా అల్పంగా కనిపిస్తుంది. అయినప్పటికీ, ఈ సరళత కింద ఒక కీలకమైన పనితీరు పరిశీలన ఉంది, దానిని విస్మరిస్తే, అది నెమ్మదైన అప్లికేషన్‌లకు మరియు గందరగోళపరిచే బగ్స్‌కు దారితీస్తుంది. పరిష్కారం? ఒక చిన్న కానీ శక్తివంతమైన ప్రాప్: key.

ఈ సమగ్ర గైడ్ మిమ్మల్ని రియాక్ట్ యొక్క రికన్సిలియేషన్ ప్రక్రియ మరియు జాబితా రెండరింగ్‌లో కీస్ యొక్క అనివార్యమైన పాత్రపై లోతైన విశ్లేషణకు తీసుకువెళుతుంది. మనం కేవలం 'ఏమిటి' అని కాకుండా 'ఎందుకు' అని కూడా అన్వేషిస్తాం—కీస్ ఎందుకు అవసరం, వాటిని సరిగ్గా ఎలా ఎంచుకోవాలి, మరియు వాటిని తప్పుగా ఎంచుకోవడం వల్ల కలిగే ముఖ్యమైన పరిణామాలు ఏమిటి. ముగిసే సమయానికి, మీరు మరింత మెరుగైన పనితీరు, స్థిరత్వం, మరియు ప్రొఫెషనల్ రియాక్ట్ అప్లికేషన్‌లను వ్రాయడానికి అవసరమైన జ్ఞానాన్ని పొందుతారు.

అధ్యాయం 1: రియాక్ట్ రికన్సిలియేషన్ మరియు వర్చువల్ DOM‌ను అర్థం చేసుకోవడం

కీస్ యొక్క ప్రాముఖ్యతను మనం అభినందించే ముందు, రియాక్ట్‌ను వేగవంతం చేసే ప్రాథమిక యంత్రాంగాన్ని మనం మొదట అర్థం చేసుకోవాలి: రికన్సిలియేషన్, ఇది వర్చువల్ DOM (VDOM) ద్వారా శక్తిని పొందుతుంది.

వర్చువల్ DOM అంటే ఏమిటి?

బ్రౌజర్ యొక్క డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM)తో నేరుగా సంప్రదించడం గణనపరంగా ఖరీదైనది. మీరు DOMలో ఏదైనా మార్చిన ప్రతిసారీ—ఒక నోడ్‌ను జోడించడం, టెక్స్ట్‌ను అప్‌డేట్ చేయడం, లేదా ఒక స్టైల్‌ను మార్చడం వంటివి—బ్రౌజర్ చాలా పని చేయాల్సి ఉంటుంది. ఇది మొత్తం పేజీకి స్టైల్స్ మరియు లేఅవుట్‌ను తిరిగి లెక్కించాల్సి రావచ్చు, ఈ ప్రక్రియను రీఫ్లో మరియు రీపెయింట్ అని పిలుస్తారు. ఒక సంక్లిష్టమైన, డేటా-ఆధారిత అప్లికేషన్‌లో, తరచుగా నేరుగా DOM మానిప్యులేషన్‌లు పనితీరును త్వరగా తగ్గించగలవు.

రియాక్ట్ ఈ సమస్యను పరిష్కరించడానికి ఒక అబ్స్ట్రాక్షన్ లేయర్‌ను పరిచయం చేస్తుంది: వర్చువల్ DOM. VDOM అనేది నిజమైన DOM యొక్క తేలికైన, ఇన్-మెమరీ ప్రాతినిధ్యం. దానిని మీ UI యొక్క బ్లూప్రింట్‌గా భావించండి. మీరు రియాక్ట్‌కు UIని అప్‌డేట్ చేయమని చెప్పినప్పుడు (ఉదాహరణకు, ఒక కాంపోనెంట్ యొక్క స్టేట్‌ను మార్చడం ద్వారా), రియాక్ట్ వెంటనే నిజమైన DOMని తాకదు. బదులుగా, ఇది ఈ క్రింది దశలను నిర్వహిస్తుంది:

1. అప్‌డేట్ చేయబడిన స్టేట్‌ను సూచించే కొత్త VDOM ట్రీ సృష్టించబడుతుంది.
2. ఈ కొత్త VDOM ట్రీని మునుపటి VDOM ట్రీతో పోల్చబడుతుంది. ఈ పోలిక ప్రక్రియను "డిఫింగ్" అంటారు.
3. పాత VDOMని కొత్త దానిగా మార్చడానికి అవసరమైన కనీస మార్పుల సమితిని రియాక్ట్ కనుగొంటుంది.
4. ఈ కనీస మార్పులు అన్నీ ఒకేసారి బ్యాచ్ చేయబడి, ఒకే, సమర్థవంతమైన ఆపరేషన్‌లో నిజమైన DOMకు వర్తింపజేయబడతాయి.

రికన్సిలియేషన్ అని పిలువబడే ఈ ప్రక్రియే రియాక్ట్‌ను అంత పనితీరుతో కూడుకున్నదిగా చేస్తుంది. మొత్తం ఇంటిని తిరిగి నిర్మించడానికి బదులుగా, రియాక్ట్ ఒక నిపుణుడైన కాంట్రాక్టర్ వలె ప్రవర్తిస్తుంది, అతను ఏ నిర్దిష్ట ఇటుకలను మార్చాలో కచ్చితంగా గుర్తించి, పనిని మరియు అంతరాయాన్ని తగ్గిస్తాడు.

అధ్యాయం 2: కీస్ లేకుండా జాబితాలను రెండర్ చేయడంలో సమస్య

ఇప్పుడు, ఈ సొగసైన వ్యవస్థ ఎక్కడ ఇబ్బందుల్లో పడుతుందో చూద్దాం. వినియోగదారుల జాబితాను రెండర్ చేసే ఒక సాధారణ కాంపోనెంట్‌ను పరిగణించండి:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}

ఈ కాంపోనెంట్ మొదట రెండర్ అయినప్పుడు, రియాక్ట్ ఒక VDOM ట్రీని నిర్మిస్తుంది. మనం `users` అర్రే యొక్క *చివరికి* ఒక కొత్త వినియోగదారుని జోడిస్తే, రియాక్ట్ యొక్క డిఫింగ్ అల్గోరిథం దానిని సునాయాసంగా నిర్వహిస్తుంది. ఇది పాత మరియు కొత్త జాబితాలను పోల్చి, చివరలో ఒక కొత్త ఐటెమ్‌ను చూసి, నిజమైన DOMకి ఒక కొత్త `<li>`ని జోడిస్తుంది. సమర్థవంతమైనది మరియు సరళమైనది.

కానీ మనం జాబితా యొక్క ప్రారంభంలో ఒక కొత్త వినియోగదారుని జోడిస్తే, లేదా ఐటెమ్‌లను పునఃక్రమబద్ధీకరిస్తే ఏమి జరుగుతుంది?

మన ప్రారంభ జాబితా ఇలా ఉందని అనుకుందాం:

• Alice
• Bob

మరియు ఒక అప్‌డేట్ తర్వాత, అది ఇలా మారుతుంది:

• Charlie
• Alice
• Bob

ప్రత్యేక ఐడెంటిఫైయర్‌లు ఏవీ లేకుండా, రియాక్ట్ రెండు జాబితాలను వాటి క్రమం (ఇండెక్స్) ఆధారంగా పోలుస్తుంది. ఇది చూసేది ఇదే:

• స్థానం 0: పాత ఐటెమ్ "Alice". కొత్త ఐటెమ్ "Charlie". రియాక్ట్ ఈ స్థానంలోని కాంపోనెంట్‌ను అప్‌డేట్ చేయాలని నిర్ధారిస్తుంది. ఇది ఉన్న DOM నోడ్‌ను మార్చి దాని కంటెంట్‌ను "Alice" నుండి "Charlie"కి మారుస్తుంది.
• స్థానం 1: పాత ఐటెమ్ "Bob". కొత్త ఐటెమ్ "Alice". రియాక్ట్ రెండవ DOM నోడ్‌ను మార్చి దాని కంటెంట్‌ను "Bob" నుండి "Alice"కి మారుస్తుంది.
• స్థానం 2: ఇక్కడ ఇంతకుముందు ఏ ఐటెమ్ లేదు. కొత్త ఐటెమ్ "Bob". రియాక్ట్ "Bob" కోసం ఒక కొత్త DOM నోడ్‌ను సృష్టించి, చొప్పిస్తుంది.

ఇది చాలా అసమర్థమైనది. ప్రారంభంలో "Charlie" కోసం కేవలం ఒక కొత్త ఎలిమెంట్‌ను చొప్పించడానికి బదులుగా, రియాక్ట్ రెండు మ్యూటేషన్‌లు మరియు ఒక ఇన్సర్షన్ చేసింది. ఒక పెద్ద జాబితాకు, లేదా తమ సొంత స్టేట్‌ను కలిగి ఉన్న సంక్లిష్టమైన జాబితా ఐటెమ్‌ల కోసం, ఈ అనవసరమైన పని గణనీయమైన పనితీరు క్షీణతకు మరియు, ముఖ్యంగా, కాంపోనెంట్ స్టేట్‌తో సంభావ్య బగ్స్‌కు దారితీస్తుంది.

అందుకే, మీరు పై కోడ్‌ను రన్ చేస్తే, మీ బ్రౌజర్ యొక్క డెవలపర్ కన్సోల్ ఒక హెచ్చరికను చూపుతుంది: "Warning: Each child in a list should have a unique 'key' prop." రియాక్ట్ మీకు స్పష్టంగా చెబుతోంది, తన పనిని సమర్థవంతంగా చేయడానికి దానికి సహాయం కావాలని.

అధ్యాయం 3: సహాయానికి `key` ప్రాప్

key ప్రాప్ అనేది రియాక్ట్‌కు అవసరమైన సూచన. ఇది మీరు ఎలిమెంట్‌ల జాబితాలను సృష్టించేటప్పుడు అందించే ఒక ప్రత్యేక స్ట్రింగ్ అట్రిబ్యూట్. కీస్ ప్రతి ఎలిమెంట్‌కు రీ-రెండర్‌లలో స్థిరమైన మరియు ప్రత్యేకమైన గుర్తింపును ఇస్తాయి.

కీస్‌తో మన `UserList` కాంపోనెంట్‌ను తిరిగి వ్రాద్దాం:

function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

ఇక్కడ, ప్రతి `user` ఆబ్జెక్ట్‌కు ఒక ప్రత్యేక `id` ప్రాపర్టీ ఉందని మనం ఊహిస్తున్నాము (ఉదా., డేటాబేస్ నుండి). ఇప్పుడు, మన దృష్టాంతాన్ని మళ్లీ పరిశీలిద్దాం.

ప్రారంభ డేటా:

[{ id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

అప్‌డేట్ చేయబడిన డేటా:

[{ id: 'u3', name: 'Charlie' }, { id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

కీస్‌తో, రియాక్ట్ యొక్క డిఫింగ్ ప్రక్రియ చాలా తెలివైనది:

1. రియాక్ట్ కొత్త VDOMలోని `<ul>` యొక్క పిల్లలను చూసి వాటి కీస్‌ను తనిఖీ చేస్తుంది. అది `u3`, `u1`, మరియు `u2`లను చూస్తుంది.
2. ఆ తర్వాత అది మునుపటి VDOM యొక్క పిల్లలను మరియు వాటి కీస్‌ను తనిఖీ చేస్తుంది. అది `u1` మరియు `u2`లను చూస్తుంది.
3. `u1` మరియు `u2` కీస్‌తో ఉన్న కాంపోనెంట్‌లు ఇప్పటికే ఉన్నాయని రియాక్ట్‌కు తెలుసు. వాటిని మార్చాల్సిన అవసరం లేదు; కేవలం వాటి సంబంధిత DOM నోడ్‌లను వాటి కొత్త స్థానాలకు తరలించాలి.
4. `u3` కీ కొత్తదని రియాక్ట్ చూస్తుంది. ఇది "Charlie" కోసం ఒక కొత్త కాంపోనెంట్ మరియు DOM నోడ్‌ను సృష్టించి, దానిని ప్రారంభంలో చొప్పిస్తుంది.

ఫలితంగా ఒకే DOM ఇన్సర్షన్ మరియు కొంత పునఃక్రమబద్ధీకరణ, ఇది మనం ఇంతకుముందు చూసిన బహుళ మ్యూటేషన్‌లు మరియు ఇన్సర్షన్ కంటే చాలా సమర్థవంతమైనది. కీస్ ఒక స్థిరమైన గుర్తింపును అందిస్తాయి, ఇది రియాక్ట్‌కు ఎలిమెంట్‌లను వాటి అర్రేలోని స్థానంతో సంబంధం లేకుండా రెండర్‌ల అంతటా ట్రాక్ చేయడానికి అనుమతిస్తుంది.

అధ్యాయం 4: సరైన కీని ఎంచుకోవడం - స్వర్ణ నియమాలు

key ప్రాప్ యొక్క ప్రభావశీలత పూర్తిగా సరైన విలువను ఎంచుకోవడంపై ఆధారపడి ఉంటుంది. తెలుసుకోవలసిన స్పష్టమైన ఉత్తమ పద్ధతులు మరియు ప్రమాదకరమైన యాంటీ-ప్యాటర్న్‌లు ఉన్నాయి.

ఉత్తమ కీ: ప్రత్యేకమైన మరియు స్థిరమైన IDలు

ఆదర్శవంతమైన కీ అనేది ఒక జాబితాలోని ఒక ఐటెమ్‌ను ప్రత్యేకంగా మరియు శాశ్వతంగా గుర్తించే విలువ. ఇది దాదాపు ఎల్లప్పుడూ మీ డేటా మూలం నుండి ఒక ప్రత్యేక ID అయి ఉంటుంది.

• ఇది దాని సిబ్లింగ్స్‌లో ప్రత్యేకంగా ఉండాలి. కీస్ ప్రపంచవ్యాప్తంగా ప్రత్యేకంగా ఉండవలసిన అవసరం లేదు, కేవలం ఆ స్థాయిలో రెండర్ అవుతున్న ఎలిమెంట్‌ల జాబితాలో మాత్రమే ప్రత్యేకంగా ఉండాలి. ఒకే పేజీలోని రెండు వేర్వేరు జాబితాలు ఒకే కీతో ఐటెమ్‌లను కలిగి ఉండవచ్చు.
• ఇది స్థిరంగా ఉండాలి. ఒక నిర్దిష్ట డేటా ఐటెమ్ కోసం కీ రెండర్‌ల మధ్య మారకూడదు. మీరు Alice కోసం డేటాను తిరిగి పొందితే, ఆమెకు ఇప్పటికీ అదే `id` ఉండాలి.

కీస్ కోసం అద్భుతమైన మూలాలు:

• డేటాబేస్ ప్రైమరీ కీస్ (ఉదా., `user.id`, `product.sku`)
• యూనివర్సల్లీ యూనిక్ ఐడెంటిఫైయర్స్ (UUIDs)
• మీ డేటా నుండి ఒక ప్రత్యేకమైన, మారని స్ట్రింగ్ (ఉదా., ఒక పుస్తకం యొక్క ISBN)

// GOOD: డేటా నుండి స్థిరమైన, ప్రత్యేకమైన IDని ఉపయోగించడం.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

యాంటీ-ప్యాటర్న్: అర్రే ఇండెక్స్‌ను కీగా ఉపయోగించడం

ఒక సాధారణ తప్పు అర్రే ఇండెక్స్‌ను కీగా ఉపయోగించడం:

// BAD: అర్రే ఇండెక్స్‌ను కీగా ఉపయోగించడం.
<div>
  {items.map((item, index) => (
    <ListItem key={index} item={item} />
  ))}
</div>

ఇది రియాక్ట్ హెచ్చరికను నిశ్శబ్దం చేసినప్పటికీ, ఇది తీవ్రమైన సమస్యలకు దారితీస్తుంది మరియు సాధారణంగా ఒక యాంటీ-ప్యాటర్న్‌గా పరిగణించబడుతుంది. ఇండెక్స్‌ను కీగా ఉపయోగించడం అంటే ఒక ఐటెమ్ యొక్క గుర్తింపు దాని జాబితాలోని స్థానానికి ముడిపడి ఉందని రియాక్ట్‌కు చెప్పడం. జాబితాను పునఃక్రమబద్ధీకరించినప్పుడు, ఫిల్టర్ చేసినప్పుడు, లేదా ప్రారంభం లేదా మధ్య నుండి ఐటెమ్‌లను జోడించినప్పుడు/తొలగించినప్పుడు కీ లేకపోవడంతో సమానమైన సమస్య ఇది.

స్టేట్ మేనేజ్‌మెంట్ బగ్:

మీ జాబితా ఐటెమ్‌లు తమ సొంత స్టేట్‌ను నిర్వహించినప్పుడు ఇండెక్స్ కీలను ఉపయోగించడం వల్ల అత్యంత ప్రమాదకరమైన దుష్ప్రభావం కనిపిస్తుంది. ఇన్‌పుట్ ఫీల్డ్‌ల జాబితాను ఊహించుకోండి:

function UnstableList() {
  const [items, setItems] = React.useState([{ id: 1, text: 'First' }, { id: 2, text: 'Second' }]);

  const handleAddItemToTop = () => {
    setItems([{ id: 3, text: 'New Top' }, ...items]);
  };

  return (
    <div>
      <button onClick={handleAddItemToTop}>Add to Top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item.text}: </label>
          <input type="text" />
        </div>
      ))}
    </div>
  );
}

ఈ మానసిక వ్యాయామాన్ని ప్రయత్నించండి:

1. జాబితా "First" మరియు "Second"తో రెండర్ అవుతుంది.
2. మీరు మొదటి ఇన్‌పుట్ ఫీల్డ్‌లో ("First" కోసం ఉన్నది) "Hello" అని టైప్ చేస్తారు.
3. మీరు "Add to Top" బటన్‌ను క్లిక్ చేస్తారు.

ఏమి జరుగుతుందని మీరు ఆశిస్తారు? "New Top" కోసం ఒక కొత్త, ఖాళీ ఇన్‌పుట్ కనిపించాలని, మరియు "First" కోసం ఉన్న ఇన్‌పుట్ (ఇప్పటికీ "Hello"ని కలిగి ఉన్నది) క్రిందికి వెళ్లాలని మీరు ఆశిస్తారు. వాస్తవానికి ఏమి జరుగుతుంది? మొదటి స్థానంలో (ఇండెక్స్ 0) ఉన్న ఇన్‌పుట్ ఫీల్డ్, ఇప్పటికీ "Hello"ని కలిగి ఉన్నది, అలాగే ఉంటుంది. కానీ ఇప్పుడు అది కొత్త డేటా ఐటెమ్, "New Top"తో అనుబంధించబడింది. ఇన్‌పుట్ కాంపోనెంట్ యొక్క స్టేట్ (దాని అంతర్గత విలువ) అది సూచించాల్సిన డేటాకు కాకుండా, దాని స్థానానికి (key=0) ముడిపడి ఉంది. ఇది ఇండెక్స్ కీల వల్ల కలిగే ఒక క్లాసిక్ మరియు గందరగోళపరిచే బగ్.

మీరు కేవలం `key={index}`ని `key={item.id}`గా మార్చినట్లయితే, సమస్య పరిష్కరించబడుతుంది. రియాక్ట్ ఇప్పుడు కాంపోనెంట్ యొక్క స్టేట్‌ను డేటా యొక్క స్థిరమైన IDతో సరిగ్గా అనుబంధిస్తుంది.

ఇండెక్స్ కీని ఎప్పుడు ఉపయోగించడం ఆమోదయోగ్యం?

ఇండెక్స్‌ను ఉపయోగించడం సురక్షితమైన అరుదైన పరిస్థితులు ఉన్నాయి, కానీ మీరు ఈ అన్ని షరతులను తప్పనిసరిగా నెరవేర్చాలి:

1. జాబితా స్థిరమైనది: ఇది ఎప్పటికీ పునఃక్రమబద్ధీకరించబడదు, ఫిల్టర్ చేయబడదు, లేదా చివరి నుండి తప్ప ఎక్కడి నుండైనా ఐటెమ్‌లను జోడించడం/తొలగించడం జరగదు.
2. జాబితాలోని ఐటెమ్‌లకు స్థిరమైన IDలు లేవు.
3. ప్రతి ఐటెమ్ కోసం రెండర్ చేయబడిన కాంపోనెంట్‌లు సరళమైనవి మరియు అంతర్గత స్టేట్ లేదు.

అయినప్పటికీ, సాధ్యమైతే తాత్కాలిక కానీ స్థిరమైన IDని ఉత్పత్తి చేయడం తరచుగా మంచిది. ఇండెక్స్‌ను ఉపయోగించడం ఎల్లప్పుడూ ఒక ఉద్దేశపూర్వక ఎంపికగా ఉండాలి, డిఫాల్ట్‌గా కాదు.

అత్యంత చెత్త విధానం: `Math.random()`

ఎప్పుడూ, ఎప్పుడూ `Math.random()` లేదా మరే ఇతర నాన్-డిటర్మినిస్టిక్ విలువను కీ కోసం ఉపయోగించవద్దు:

// TERRIBLE: ఇలా చేయవద్దు!
<div>
  {items.map(item => (
    <ListItem key={Math.random()} item={item} />
  ))}
</div>

`Math.random()` ద్వారా ఉత్పత్తి చేయబడిన కీ ప్రతి ఒక్క రెండర్‌లో భిన్నంగా ఉంటుందని హామీ ఇవ్వబడింది. ఇది మునుపటి రెండర్ నుండి మొత్తం కాంపోనెంట్‌ల జాబితా నాశనం చేయబడిందని మరియు పూర్తిగా భిన్నమైన కాంపోనెంట్‌ల యొక్క సరికొత్త జాబితా సృష్టించబడిందని రియాక్ట్‌కు చెబుతుంది. ఇది రియాక్ట్‌ను పాత కాంపోనెంట్‌లన్నింటినీ అన్‌మౌంట్ చేయడానికి (వాటి స్టేట్‌ను నాశనం చేస్తూ) మరియు కొత్తవన్నీ మౌంట్ చేయడానికి బలవంతం చేస్తుంది. ఇది రికన్సిలియేషన్ యొక్క ఉద్దేశ్యాన్ని పూర్తిగా ఓడిస్తుంది మరియు పనితీరుకు సాధ్యమైనంత చెత్త ఎంపిక.

అధ్యాయం 5: అధునాతన భావనలు మరియు సాధారణ ప్రశ్నలు

కీస్ మరియు `React.Fragment`

కొన్నిసార్లు మీరు ఒక `map` కాల్‌బ్యాక్ నుండి బహుళ ఎలిమెంట్‌లను తిరిగి ఇవ్వవలసి ఉంటుంది. దీనికి ప్రామాణిక మార్గం `React.Fragment`ను ఉపయోగించడం. మీరు ఇలా చేసినప్పుడు, `key`ను `Fragment` కాంపోనెంట్‌పైనే ఉంచాలి.

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        // కీ ఫ్రాగ్మెంట్‌పై వెళుతుంది, పిల్లలపై కాదు.
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

ముఖ్యమైనది: షార్ట్‌హ్యాండ్ సింటాక్స్ `<>...</>` కీస్‌కు మద్దతు ఇవ్వదు. మీ జాబితాకు ఫ్రాగ్మెంట్‌లు అవసరమైతే, మీరు స్పష్టమైన `<React.Fragment>` సింటాక్స్‌ను ఉపయోగించాలి.

కీస్ కేవలం సిబ్లింగ్స్‌లో మాత్రమే ప్రత్యేకంగా ఉండాలి

ఒక సాధారణ అపోహ ఏమిటంటే, కీస్ మీ మొత్తం అప్లికేషన్‌లో ప్రపంచవ్యాప్తంగా ప్రత్యేకంగా ఉండాలి. ఇది నిజం కాదు. ఒక కీ కేవలం దాని తక్షణ సిబ్లింగ్స్ జాబితాలో మాత్రమే ప్రత్యేకంగా ఉండాలి.

function CourseRoster({ courses }) {
  return (
    <div>
      {courses.map(course => (
        <div key={course.id}>  {/* కోర్సు కోసం కీ */} 
          <h3>{course.title}</h3>
          <ul>
            {course.students.map(student => (
              // ఈ విద్యార్థి కీ కేవలం ఈ నిర్దిష్ట కోర్సు యొక్క విద్యార్థి జాబితాలో మాత్రమే ప్రత్యేకంగా ఉండాలి.
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

పై ఉదాహరణలో, రెండు వేర్వేరు కోర్సులలో `id: 's1'` ఉన్న విద్యార్థి ఉండవచ్చు. ఇది పూర్తిగా సరైనదే ఎందుకంటే కీస్ వేర్వేరు పేరెంట్ `<ul>` ఎలిమెంట్‌లలో మూల్యాంకనం చేయబడుతున్నాయి.

కాంపోనెంట్ స్టేట్‌ను ఉద్దేశపూర్వకంగా రీసెట్ చేయడానికి కీస్‌ను ఉపయోగించడం

కీస్ ప్రధానంగా జాబితా ఆప్టిమైజేషన్ కోసం అయినప్పటికీ, అవి ఒక లోతైన ఉద్దేశ్యాన్ని నెరవేరుస్తాయి: అవి ఒక కాంపోనెంట్ యొక్క గుర్తింపును నిర్వచిస్తాయి. ఒక కాంపోనెంట్ యొక్క కీ మారితే, రియాక్ట్ ఉన్న కాంపోనెంట్‌ను అప్‌డేట్ చేయడానికి ప్రయత్నించదు. బదులుగా, ఇది పాత కాంపోనెంట్‌ను (మరియు దాని పిల్లలందరినీ) నాశనం చేసి, మొదటి నుండి సరికొత్త దానిని సృష్టిస్తుంది. ఇది పాత ఇన్‌స్టాన్స్‌ను అన్‌మౌంట్ చేసి, కొత్త దానిని మౌంట్ చేస్తుంది, దాని స్టేట్‌ను సమర్థవంతంగా రీసెట్ చేస్తుంది.

ఇది ఒక కాంపోనెంట్‌ను రీసెట్ చేయడానికి ఒక శక్తివంతమైన మరియు డిక్లరేటివ్ మార్గం కావచ్చు. ఉదాహరణకు, ఒక `userId` ఆధారంగా డేటాను పొందే `UserProfile` కాంపోనెంట్‌ను ఊహించుకోండి.

function App() {
  const [userId, setUserId] = React.useState('user-1');

  return (
    <div>
      <button onClick={() => setUserId('user-1')}>View User 1</button>
      <button onClick={() => setUserId('user-2')}>View User 2</button>
      
      <UserProfile key={userId} id={userId} />
    </div>
  );
}

`UserProfile` కాంపోనెంట్‌పై `key={userId}` ఉంచడం ద్వారా, `userId` మారినప్పుడల్లా, మొత్తం `UserProfile` కాంపోనెంట్ విసిరివేయబడి, ఒక కొత్తది సృష్టించబడుతుందని మనం హామీ ఇస్తున్నాము. ఇది మునుపటి వినియోగదారు ప్రొఫైల్ నుండి స్టేట్ (ఫారం డేటా లేదా పొందిన కంటెంట్ వంటివి) మిగిలిపోయే సంభావ్య బగ్స్‌ను నివారిస్తుంది. ఇది కాంపోనెంట్ గుర్తింపు మరియు జీవితచక్రాన్ని నిర్వహించడానికి ఒక శుభ్రమైన మరియు స్పష్టమైన మార్గం.

ముగింపు: మెరుగైన రియాక్ట్ కోడ్ రాయడం

`key` ప్రాప్ కేవలం ఒక కన్సోల్ హెచ్చరికను నిశ్శబ్దం చేయడానికి ఒక మార్గం కంటే చాలా ఎక్కువ. ఇది రియాక్ట్‌కు ఒక ప్రాథమిక సూచన, దాని రికన్సిలియేషన్ అల్గోరిథం సమర్థవంతంగా మరియు సరిగ్గా పనిచేయడానికి అవసరమైన కీలక సమాచారాన్ని అందిస్తుంది. కీస్ వాడకంలో నైపుణ్యం సాధించడం ఒక ప్రొఫెషనల్ రియాక్ట్ డెవలపర్ యొక్క ముఖ్య లక్షణం.

ముఖ్యమైన అంశాలను సంగ్రహిద్దాం:

• పనితీరుకు కీస్ అవసరం: అవి రియాక్ట్ యొక్క డిఫింగ్ అల్గోరిథం అనవసరమైన DOM మ్యూటేషన్‌లు లేకుండా ఒక జాబితాలో ఎలిమెంట్‌లను సమర్థవంతంగా జోడించడానికి, తొలగించడానికి మరియు పునఃక్రమబద్ధీకరించడానికి వీలు కల్పిస్తాయి.
• ఎల్లప్పుడూ స్థిరమైన మరియు ప్రత్యేకమైన IDలను ఉపయోగించండి: ఉత్తమ కీ అనేది మీ డేటా నుండి ఒక ప్రత్యేక ఐడెంటిఫైయర్, ఇది రెండర్‌ల మధ్య మారదు.
• అర్రే ఇండెక్స్‌లను కీస్‌గా వాడటం మానుకోండి: ఒక ఐటెమ్ యొక్క ఇండెక్స్‌ను దాని కీగా ఉపయోగించడం పేలవమైన పనితీరుకు మరియు సూక్ష్మమైన, నిరాశపరిచే స్టేట్ మేనేజ్‌మెంట్ బగ్స్‌కు దారితీస్తుంది, ముఖ్యంగా డైనమిక్ జాబితాలలో.
• యాదృచ్ఛిక లేదా అస్థిరమైన కీలను ఎప్పుడూ ఉపయోగించవద్దు: ఇది అత్యంత చెత్త దృష్టాంతం, ఎందుకంటే ఇది ప్రతి రెండర్‌లో మొత్తం కాంపోనెంట్‌ల జాబితాను తిరిగి సృష్టించడానికి రియాక్ట్‌ను బలవంతం చేస్తుంది, పనితీరు మరియు స్టేట్‌ను నాశనం చేస్తుంది.
• కీస్ కాంపోనెంట్ గుర్తింపును నిర్వచిస్తాయి: మీరు ఒక కాంపోనెంట్ యొక్క కీని మార్చడం ద్వారా దాని స్టేట్‌ను ఉద్దేశపూర్వకంగా రీసెట్ చేయడానికి ఈ ప్రవర్తనను ఉపయోగించుకోవచ్చు.

ఈ సూత్రాలను అంతర్గతీకరించడం ద్వారా, మీరు వేగవంతమైన, మరింత విశ్వసనీయమైన రియాక్ట్ అప్లికేషన్‌లను వ్రాయడమే కాకుండా, లైబ్రరీ యొక్క ప్రధాన మెకానిక్స్‌పై లోతైన అవగాహనను కూడా పొందుతారు. తదుపరిసారి మీరు ఒక జాబితాను రెండర్ చేయడానికి ఒక అర్రేపై మ్యాప్ చేసినప్పుడు, `key` ప్రాప్‌కు అది అర్హమైన శ్రద్ధ ఇవ్వండి. మీ అప్లికేషన్ యొక్క పనితీరు—మరియు మీ భవిష్యత్తు—మీకు ధన్యవాదాలు తెలుపుతుంది.