React Key Prop ஏன் உங்களுக்குத் தேவை?
உங்கள் console-இல் இந்த எச்சரிக்கை வரும்: "Each child in a list should have a unique 'key' prop."
பல டெவலப்பர்கள் இதை அலட்சியப்படுத்துகிறார்கள். இது ஒரு தவறு. key prop என்பது வெறும் எச்சரிக்கை மட்டுமல்ல. இது செயல்திறனை (performance) மேம்படுத்தவும், பிழைகளைத் (bugs) தவிர்க்கவும் உதவும் ஒரு கருவியாகும்.
key prop என்ன செய்கிறது?
பட்டியலிடப்பட்ட உருப்படிகளை (list items) அடையாளம் காண React key-ஐப் பயன்படுத்துகிறது. எந்த உருப்படி மாற்றப்பட்டது, நகர்த்தப்பட்டது அல்லது நீக்கப்பட்டது என்பதை இது React-க்குத் தெரிவிக்கிறது.
key இல்லையென்றால், React முழு பட்டியலையும் மீண்டும் உருவாக்க (re-render) வேண்டியிருக்கும். இது உங்கள் செயலியை மெதுவாக்கும் மற்றும் தரவுப் பிழைகளை (data bugs) ஏற்படுத்தும்.
நூலக உதாரணம்
1,000 புத்தகங்களைக் கொண்ட ஒரு நூலகத்தை கற்பனை செய்து கொள்ளுங்கள். நீங்கள் இடையில் ஒரு புதிய புத்தகத்தைச் சேர்த்தால், இடவசதி செய்வதற்காக மற்ற அனைத்துப் புத்தகங்களையும் நகர்த்த வேண்டியிருக்கும்.
React-இல், key ஒரு தனித்துவமான ID போலச் செயல்படுகிறது. இது ஒவ்வொரு உறுப்பிற்கும் (element) ஒரு அடையாளத்தைக் கொடுக்கிறது. reconciliation செயல்முறையின் போது, React புதிய பட்டியலை பழைய பட்டியலுடன் ஒப்பிடுகிறது.
Key இல்லையென்றால் ஏற்படும் சிக்கல்கள்
நீங்கள் key-ஐத் தவிர்த்தால், ஒவ்வொரு உருப்படியும் ஒன்றுதான் என்று React நினைக்கும். நீங்கள் தொடக்கத்தில் ஒரு உருப்படியைச் சேர்த்தால், முழு பட்டியலும் மாறிவிட்டதாக React கருதும். இது DOM-இல் உள்ள ஒவ்வொரு உறுப்பையும் மீண்டும் உருவாக்கும். இது memory மற்றும் CPU-வை வீணடிக்கும்.
Index எனும் பொறி
புதிய டெவலப்பர்கள் பெரும்பாலும் array index-ஐ key-ஆகப் பயன்படுத்துகிறார்கள்.
உதாரணம்: key={index}
இது மாறும் பட்டியல்களுக்கு (dynamic lists) ஆபத்தானது. நீங்கள் உருப்படிகளை வரிசைப்படுத்தினாலோ (sort), வடிகட்டினாலோ (filter) அல்லது நீக்கினாலோ (delete), index மாறிவிடும். இது தவறான UI நிலைகளுக்கும் (UI states) பிழைகளுக்கும் வழிவகுக்கும்.
Keys-க்கான சிறந்த நடைமுறைகள்
- உங்கள் database-லிருந்து நிலையான ID-களைப் பயன்படுத்தவும் (உதாரணமாக
user.id). - siblings-களுக்கு இடையே keys தனித்துவமாக இருப்பதை உறுதி செய்யவும்.
- key-ஆக
Math.random()பயன்படுத்துவதைத் தவிர்க்கவும். இது ஒவ்வொரு render செய்யும் போதும் மாறும், இதனால் UI விட்டு விட்டுத் தெரியும் (flickering). - உங்கள் தரவில் ID இல்லையென்றால், தரவைப் பெறும்போது (fetch)
uuidஅல்லதுnanoidபயன்படுத்தி ஒன்றை உருவாக்கவும்.
Key தேர்வு வழிகாட்டி
• Database ID: சிறந்தது. மிகவும் நிலையானது மற்றும் வேகமானது. • Array Index: ஒருபோதும் மாறாத static lists-களுக்கு மட்டுமே பயன்படுத்தவும். • Math.random(): தவிர்க்கவும். இது தேவையற்ற re-mounts-களைத் தூண்டும்.
சுருக்கம்
ஒரு நல்ல key உங்கள் செயலியை வேகமாக்கும். இது தேவையற்ற re-renders-களை 40% வரை குறைக்க உதவும். எப்போதும் நிலையான மற்றும் தனித்துவமான அடையாளங்களுக்கு (identifiers) முன்னுரிமை அளிக்கவும்.