பட்டியல் உருப்படிகளுக்கு ஏன் key தேவை, மேலும் ஏன் index ஐப் பயன்படுத்த வேண்டாம்?

Question

Accepted Answer

நீங்கள் பட்டியலை render செய்யும்போது, React ஆனது **எந்த உருப்படி எதுவாக உள்ளது** என்பதை render களுக்கு இடையில் அறிய வேண்டும், இதனால் DOM nodes களை சரியாக மீண்டும் பயன்படுத்த, மறுவரிசைப்படுத்த, செருக அல்லது நீக்க முடியும். **`key`** அந்த identity ஆகும். ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Array index ஏன் ஆபத்தாகும் index ஐ key ஆக பயன்படுத்துவது React க்கு "position 0 இல் உள்ள உருப்படி முன்பு இருந்த அதே உருப்படி" என்று சொல்கிறது — பட்டியல் மறுவரிசைப்படுத்தப்படுவதைப் போலவே அல்லது முன்பிலிருந்து செருக/நீக்கும்போது உடனடியாக உடைந்துவிடுகிறது: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` ஒரு உண்மையான அறிகுறி: input களின் பட்டியல் அங்கு ஒரு வரியில் typing செய்வது நீக்கும்/sorting க்குப் பிறகு மற்றொரு வரியில் "குதிக்கும்", ஏனெனில் React தவறான `` ஐ மறுபயன்படுத்திவிட்டது (மற்றும் அதன் உள்ளிருக்கும் value/focus). ## Rules - உங்கள் data விலிருந்து **stable, unique** id ஐப் பயன்படுத்தவும் (`user.id`, slug). - Index **only** static பட்டியலுக்கு ஏற்றுக்கொள்ளப்படுகிறது, இது ஒருபோதும் மறுவரிசைப்படுத்தப்படாது, செருகப்படாது அல்லது நீக்கப்படாது. - Keys பெயர்ச்சி **siblings** களுக்கு இடையில் unique ஆக இருக்க வேண்டும் (globally இல்லை). Keys ஆனது reconciliation algorithm க்கு ஒரு hint ஆகும்; அவற்றைச் சரியாக பெறுவது performance மற்றும் component state இரண்டையும் சரியாக வைத்திருக்கிறது.