React Key Prop ஏன் உங்களுக்குத் தேவை?
உங்கள் console-இல் இந்தத் தவறு தோன்றும்: "Each child in a list should have a unique 'key' prop."
பல டெவலப்பர்கள் இதை அலட்சியப்படுத்துகிறார்கள். இது ஒரு தவறு. இந்த எச்சரிக்கை (warning) செயல்திறன் சிக்கல்கள் மற்றும் சாத்தியமான பிழைகளைப் (bugs) பற்றி உங்களுக்குத் தெரிவிக்கிறது.
key prop என்றால் என்ன?
இது ஒரு பட்டியலில் உள்ள குறிப்பிட்ட உருப்படிகளை (items) அடையாளம் காண React-க்கு உதவுகிறது. எந்த உருப்படி மாறியது, நகர்த்தப்பட்டது அல்லது நீக்கப்பட்டது என்பதை இது React-க்குத் தெரிவிக்கிறது. ஒரு key இல்லையென்றால், ஒவ்வொரு முறை மாற்றம் ஏற்படும் போதும் React முழு பட்டியலையும் மீண்டும் ரெண்டர் (re-render) செய்யும். இது உங்கள் செயலியை மெதுவாக்கும்.
1000 புத்தகங்கள் கொண்ட ஒரு நூலகத்தை நினைத்துப் பாருங்கள். நீங்கள் நடுவில் ஒரு புதிய புத்தகத்தைச் சேர்த்தால், இடவசதி செய்ய மற்ற அனைத்துப் புத்தகங்களையும் நகர்த்த வேண்டியிருக்கும். ஒரு key என்பது ஒவ்வொரு புத்தகத்திற்கும் ஒரு தனித்துவமான ID போலச் செயல்படுகிறது. இது மற்ற அனைத்தையும் நகர்த்தாமல், சரியான இடத்தைக் கண்டறிய React-க்கு அனுமதிக்கிறது.
Reconciliation செயல்முறை
புதிய Virtual DOM-ஐ பழையதுடன் ஒப்பிடுவதற்கு React ஒரு diffing algorithm-ஐப் பயன்படுத்துகிறது.
- State மாறுகிறது.
- React ஒரு புதிய மரத்தை (tree) உருவாக்குகிறது.
- React, keys-களைப் பயன்படுத்தி மரங்களை ஒப்பிடுகிறது.
- மாறிய கூறுகளை (elements) மட்டும் React புதுப்பிக்கிறது.
பொதுவான தவறு: array index-ஐ key ஆகப் பயன்படுத்துவது.
உங்கள் பட்டியல் மாறக்கூடியதாக இருந்தால், ஒருபோதும் key={index} என்பதைப் பயன்படுத்தாதீர்கள். நீங்கள் உருப்படிகளைச் சேர்த்தால் அல்லது நீக்கினால், ஒவ்வொரு உருப்படியின் index-ம் மாறும். இதனால் React குழப்பமடைந்து, உண்மையில் மாறாத உருப்படிகளையும் மீண்டும் ரெண்டர் செய்யும். இது நினைவகத்தை (memory) வீணாக்குவதோடு UI பிழைகளையும் (bugs) ஏற்படுத்தும்.
இதைச் சரிசெய்வது எப்படி:
- உங்கள் தரவுத்தளத்திலிருந்து (database) ஒரு நிலையான ID-யைப் பயன்படுத்தவும் (உதாரணமாக
user.id). - உங்கள் தரவில் ID இல்லையென்றால்,
uuidபோன்ற ஒரு தனித்துவமான string-ஐப் பயன்படுத்தவும். - Keys-களுக்கு
Math.random()-ஐத் தவிர்க்கவும். இது ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய ID-யை உருவாக்குகிறது, இது கூறுகளை (components) மீண்டும் மவுண்ட் (re-mount) செய்யத் தூண்டுவதோடு UI திரையிடும் போது விட்டு விட்டுத் தோன்றும் (flickering) தன்மையையும் ஏற்படுத்துகிறது.
சிறந்த நடைமுறைகள்:
- Keys நிலையானதாக (stable) இருக்க வேண்டும்.
- ஒரே நிலையில் உள்ள கூறுகளுக்கு (siblings) இடையே Keys தனித்துவமாக இருக்க வேண்டும்.
- சிறந்த செயல்திறனுக்கு தரவுத்தள ID-களைப் பயன்படுத்தவும்.
Key ஒப்பீட்டு அட்டவணை: • Database ID: பரிந்துரைக்கப்படுகிறது. நிலையானது மற்றும் வேகமானது. • Array Index: பரிந்துரைக்கப்படுவதில்லை. வரிசைப்படுத்துதல் (sorting) அல்லது வடிகட்டுதலின் (filtering) போது பிழைகளை ஏற்படுத்தும். • Math.random(): தவிர்க்கவும். தேவையற்ற re-mounts-களை ஏற்படுத்தும்.
உங்கள் பணிப்பாய்விற்கான (workflow) சுருக்கம்: இந்தத் தவறு தோன்றினால், உங்கள் கூறுகளுக்கு (components) நிரந்தர அடையாளங்காட்டி இல்லை என்று அர்த்தம். மின்னஞ்சல் (email) அல்லது ID போன்ற தனித்துவமான புலங்கள் (fields) உங்கள் API பதிலில் (response) உள்ளனவா என்று சரிபார்க்கவும். தேவையற்ற re-renders-களைத் தவிர்த்து 30-40% செயல்திறனைச் சேமிக்க இதைச் சரிசெய்யவும்.