എന്തുകൊണ്ടാണ് നിങ്ങൾക്ക് React Key Prop ആവശ്യമായി വരുന്നത്
നിങ്ങളുടെ കൺസോളിൽ ഈ എറർ കാണാം: "Each child in a list should have a unique 'key' prop."
പല ഡെവലപ്പർമാരും ഇത് അവഗണിക്കാറുണ്ട്. അത് ഒരു തെറ്റാണ്. പെർഫോമൻസ് പ്രശ്നങ്ങളെക്കുറിച്ചും വരാൻ സാധ്യതയുള്ള ബഗുകളെക്കുറിച്ചും ഈ വാണിംഗ് നിങ്ങളെ അറിയിക്കുന്നു.
എന്താണ് ഒരു key prop?
ഒരു ലിസ്റ്റിലെ പ്രത്യേക ഐറ്റങ്ങളെ തിരിച്ചറിയാൻ ഇത് React-നെ സഹായിക്കുന്നു. ഏത് ഐറ്റമാണ് മാറിയതെന്നോ, നീക്കിയതെന്നോ, അല്ലെങ്കിൽ നീക്കം ചെയ്തതെന്നോ ഇത് React-ന് പറഞ്ഞുതരുന്നു. ഒരു key ഇല്ലെങ്കിൽ, എന്തെങ്കിലും മാറ്റം വരുമ്പോഴെല്ലാം React മുഴുവൻ ലിസ്റ്റും വീണ്ടും റെൻഡർ (re-render) ചെയ്യും. ഇത് നിങ്ങളുടെ ആപ്പിന്റെ വേഗത കുറയ്ക്കും.
1000 പുസ്തകങ്ങളുള്ള ഒരു ലൈബ്രറിയെക്കുറിച്ച് ചിന്തിക്കുക. നിങ്ങൾ നടുവിൽ ഒരു പുതിയ പുസ്തകം ചേർക്കുകയാണെങ്കിൽ, സ്ഥലമുണ്ടാക്കാൻ മറ്റെല്ലാ പുസ്തകങ്ങളും നീക്കേണ്ടി വരും. ഓരോ പുസ്തകത്തിനും ഒരു യുണീക് ഐഡി (unique ID) പോലെയാണ് ഒരു key പ്രവർത്തിക്കുന്നത്. മറ്റുള്ളവയെല്ലാം നീക്കാതെ തന്നെ കൃത്യമായ സ്ഥാനം കണ്ടെത്താൻ ഇത് React-നെ അനുവദിക്കുന്നു.
Reconciliation പ്രക്രിയ
പുതിയ Virtual DOM-നെ പഴയതിനോട് താരതമ്യം ചെയ്യാൻ React ഒരു diffing algorithm ഉപയോഗിക്കുന്നു.
- State മാറുന്നു.
- React ഒരു പുതിയ ട്രീ (tree) നിർമ്മിക്കുന്നു.
- Keys ഉപയോഗിച്ച് React ട്രീകൾ താരതമ്യം ചെയ്യുന്നു.
- മാറ്റം വന്ന എലമെന്റുകൾ മാത്രം React അപ്ഡേറ്റ് ചെയ്യുന്നു.
സാധാരണയായി സംഭവിക്കുന്ന തെറ്റ്: Array index ഒരു key ആയി ഉപയോഗിക്കുന്നത്.
നിങ്ങളുടെ ലിസ്റ്റിൽ മാറ്റങ്ങൾ വരുന്നുണ്ടെങ്കിൽ ഒരിക്കലും key={index} ഉപയോഗിക്കരുത്. നിങ്ങൾ ഐറ്റങ്ങൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്താൽ, ഓരോ ഐറ്റത്തിന്റെയും ഇൻഡക്സ് മാറിക്കൊണ്ടിരിക്കും. ഇത് React-നെ ആശയക്കുഴപ്പത്തിലാക്കുകയും യഥാർത്ഥത്തിൽ മാറ്റം വരാത്ത ഐറ്റങ്ങൾ പോലും വീണ്ടും റെൻഡർ ചെയ്യുകയും ചെയ്യും. ഇത് മെമ്മറി നഷ്ടപ്പെടുത്തുകയും UI ബഗുകൾക്ക് കാരണമാവുകയും ചെയ്യുന്നു.
ഇത് എങ്ങനെ പരിഹരിക്കാം:
- നിങ്ങളുടെ ഡാറ്റാബേസിൽ നിന്നുള്ള ഒരു സ്റ്റേബിൾ ഐഡി ഉപയോഗിക്കുക (ഉദാഹരണത്തിന്
user.id). - നിങ്ങളുടെ ഡാറ്റയിൽ ഐഡി ഇല്ലെങ്കിൽ
uuidപോലുള്ള ഒരു യുണീക് സ്ട്രിംഗ് ഉപയോഗിക്കുക. - Keys ആയി
Math.random()ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. ഇത് ഓരോ റെൻഡറിംഗിലും പുതിയൊരു ഐഡി നിർമ്മിക്കുന്നു, ഇത് കോംപോണന്റുകളെ വീണ്ടും റീ-മൗണ്ട് (re-mount) ചെയ്യാൻ നിർബന്ധിതമാക്കുകയും UI ഫ്ലിക്കറിംഗിന് (flickering) കാരണമാവുകയും ചെയ്യുന്നു.
മികച്ച രീതികൾ (Best practices):
- Keys സ്റ്റേബിൾ ആയിരിക്കണം.
- ഒരേ ലെവലിലുള്ള കോംപോണന്റുകൾക്കിടയിൽ (siblings) Keys യുണീക് ആയിരിക്കണം.
- മികച്ച പെർഫോമൻസിനായി ഡാറ്റാബേസ് ഐഡികൾ ഉപയോഗിക്കുക.
Key താരതമ്യ പട്ടിക: • Database ID: ശുപാർശ ചെയ്യുന്നു. സ്റ്റേബിൾ ആണ്, വേഗതയേറിയതാണ്. • Array Index: ശുപാർശ ചെയ്യുന്നില്ല. സോർട്ടിംഗ് (sorting) അല്ലെങ്കിൽ ഫിൽട്ടറിംഗ് (filtering) സമയത്ത് ബഗുകൾ ഉണ്ടാകാൻ കാരണമാകും. • Math.random(): ഒഴിവാക്കുക. അനാവശ്യമായ റീ-മൗണ്ടുകൾക്ക് കാരണമാകും.
നിങ്ങളുടെ വർക്ക്ഫ്ലോയ്ക്കുള്ള സംഗ്രഹം: നിങ്ങൾക്ക് ഈ എറർ കാണുന്നുണ്ടെങ്കിൽ, നിങ്ങളുടെ കോംപോണന്റുകൾക്ക് സ്ഥിരമായ ഒരു ഐഡന്റിഫയർ ഇല്ല എന്നാണ് അർത്ഥം. ഇമെയിൽ അല്ലെങ്കിൽ ഐഡി പോലുള്ള യുണീക് ഫീൽഡുകൾക്കായി നിങ്ങളുടെ API റെസ്പോൺസ് പരിശോധിക്കുക. അനാവശ്യമായ റെൻഡറുകൾ 30-40% വരെ കുറയ്ക്കാൻ ഇത് സഹായിക്കും.