પર્ફોર્મન્સને અનલોક કરવું: લિસ્ટ ઓપ્ટિમાઇઝેશન માટે રીએક્ટ રિકન્સિલિએશન કીઝ (Keys) માં ઊંડાણપૂર્વક અભ્યાસ

આધુનિક વેબ ડેવલપમેન્ટની દુનિયામાં, ડેટા ફેરફારોને ઝડપથી પ્રતિસાદ આપતા ડાયનેમિક યુઝર ઇન્ટરફેસ બનાવવું સર્વોપરી છે. રીએક્ટ, તેના કમ્પોનન્ટ-આધારિત આર્કિટેક્ચર અને ડિક્લેરેટિવ સ્વભાવ સાથે, આ ઇન્ટરફેસ બનાવવા માટે વૈશ્વિક ધોરણ બની ગયું છે. રીએક્ટની કાર્યક્ષમતાના કેન્દ્રમાં રિકન્સિલિએશન નામની પ્રક્રિયા છે, જેમાં વર્ચ્યુઅલ 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 ને નવા VDOM માં રૂપાંતરિત કરવા માટે જરૂરી ન્યૂનતમ ફેરફારોનો સેટ શોધે છે.
4. આ ન્યૂનતમ ફેરફારોને પછી એકસાથે બેચ કરવામાં આવે છે અને એક જ, કાર્યક્ષમ ઓપરેશનમાં વાસ્તવિક DOM પર લાગુ કરવામાં આવે છે.

આ પ્રક્રિયા, જેને રિકન્સિલિએશન તરીકે ઓળખવામાં આવે છે, તે જ રીએક્ટને આટલું પર્ફોર્મન્ટ બનાવે છે. આખું ઘર ફરીથી બનાવવાને બદલે, રીએક્ટ એક નિષ્ણાત કોન્ટ્રાક્ટરની જેમ કામ કરે છે જે ચોક્કસપણે ઓળખે છે કે કઈ ચોક્કસ ઇંટો બદલવાની જરૂર છે, કામ અને વિક્ષેપને ઘટાડીને.

પ્રકરણ 2: કીઝ (Keys) વગર લિસ્ટ રેન્ડર કરવાની સમસ્યા

હવે, ચાલો જોઈએ કે આ સુંદર સિસ્ટમ ક્યાં મુશ્કેલીમાં પડી શકે છે. વપરાશકર્તાઓની યાદી રેન્ડર કરતા એક સરળ કમ્પોનન્ટનો વિચાર કરો:

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' પસંદ કરવી - સુવર્ણ નિયમો

key પ્રોપની અસરકારકતા સંપૂર્ણપણે સાચું મૂલ્ય પસંદ કરવા પર આધાર રાખે છે. અહીં સ્પષ્ટ શ્રેષ્ઠ પ્રથાઓ અને જોખમી એન્ટી-પેટર્ન છે જેના વિશે જાગૃત રહેવું જોઈએ.

શ્રેષ્ઠ કી: અનન્ય અને સ્થિર ID

આદર્શ કી એ એક મૂલ્ય છે જે સૂચિમાંની કોઈ આઇટમને અનન્ય અને કાયમ માટે ઓળખે છે. આ લગભગ હંમેશા તમારા ડેટા સ્ત્રોતમાંથી એક અનન્ય ID હોય છે.

• તે તેના સિબ્લિંગ્સ (siblings) વચ્ચે અનન્ય હોવી જોઈએ. કીઝને વૈશ્વિક સ્તરે અનન્ય હોવાની જરૂર નથી, ફક્ત તે સ્તરે રેન્ડર થતા એલિમેન્ટ્સની સૂચિમાં અનન્ય હોવી જોઈએ. એક જ પેજ પરની બે અલગ-અલગ સૂચિઓમાં સમાન કીવાળી આઇટમ્સ હોઈ શકે છે.
• તે સ્થિર હોવી જોઈએ. કોઈ ચોક્કસ ડેટા આઇટમ માટેની કી રેન્ડર્સ વચ્ચે બદલાવી ન જોઈએ. જો તમે એલિસ માટે ડેટા ફરીથી મેળવો, તો પણ તેની પાસે સમાન id હોવી જોઈએ.

કીઝ માટે ઉત્તમ સ્ત્રોતોમાં શામેલ છે:

• ડેટાબેઝ પ્રાઇમરી કીઝ (દા.ત., user.id, product.sku)
• યુનિવર્સલી યુનિક આઇડેન્ટિફાયર્સ (UUIDs)
• તમારા ડેટામાંથી એક અનન્ય, અપરિવર્તનશીલ સ્ટ્રિંગ (દા.ત., પુસ્તકનો ISBN)

// સારું: ડેટામાંથી સ્થિર, અનન્ય ID નો ઉપયોગ કરવો.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

એન્ટી-પેટર્ન: એરે ઇન્ડેક્સનો કી તરીકે ઉપયોગ કરવો

એક સામાન્ય ભૂલ એરે ઇન્ડેક્સનો કી તરીકે ઉપયોગ કરવાની છે:

// ખરાબ: એરે ઇન્ડેક્સનો કી તરીકે ઉપયોગ કરવો.
<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() અથવા અન્ય કોઈ બિન-નિર્ધારિત મૂલ્યનો ઉપયોગ કરશો નહીં:

// ભયંકર: આ કરશો નહીં!
<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 => (
        // કી Fragment પર જાય છે, ચિલ્ડ્રન પર નહીં.
        <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> એલિમેન્ટ્સમાં થઈ રહ્યું છે.

કમ્પોનન્ટ સ્ટેટને ઇરાદાપૂર્વક રીસેટ કરવા માટે કીઝનો ઉપયોગ કરવો

જ્યારે કીઝ મુખ્યત્વે લિસ્ટ ઓપ્ટિમાઇઝેશન માટે હોય છે, ત્યારે તેઓ એક ઊંડા હેતુની પૂર્તિ કરે છે: તેઓ કમ્પોનન્ટની ઓળખને વ્યાખ્યાયિત કરે છે. જો કોઈ કમ્પોનન્ટની કી બદલાય છે, તો રીએક્ટ હાલના કમ્પોનન્ટને અપડેટ કરવાનો પ્રયાસ કરશે નહીં. તેના બદલે, તે જૂના કમ્પોનન્ટ (અને તેના બધા ચિલ્ડ્રન) નો નાશ કરશે અને શરૂઆતથી એક તદ્દન નવો કમ્પોનન્ટ બનાવશે. આ જૂના ઇન્સ્ટન્સને અનમાઉન્ટ કરે છે અને એક નવું માઉન્ટ કરે છે, અસરકારક રીતે તેના સ્ટેટને રીસેટ કરે છે.

આ કમ્પોનન્ટને રીસેટ કરવાની એક શક્તિશાળી અને ડિક્લેરેટિવ રીત હોઈ શકે છે. દાખલા તરીકે, એક UserProfile કમ્પોનન્ટની કલ્પના કરો જે userId પર આધારિત ડેટા મેળવે છે.

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 પ્રોપને તે જે ધ્યાનને પાત્ર છે તે આપો. તમારી એપ્લિકેશનનું પર્ફોર્મન્સ—અને તમારું ભવિષ્યનું સ્વ—તમારો આભાર માનશે.