যখন আপনি একটি তালিকা রেন্ডার করেন, React কে কোন আইটেম কোনটি রেন্ডারের মধ্যে জানার একটি উপায় প্রয়োজন যাতে এটি সঠিকভাবে DOM নোড পুনরায় ব্যবহার, পুনর্বিন্যাস, সন্নিবেশ বা মুছে ফেলতে পারে। key সেই পরিচয়।
{users.map(user => (
<Row key={user.id} user={user} /> // stable, unique id
))}
Index কে key হিসাবে ব্যবহার করা React কে বলে "অবস্থান 0 এ আইটেম আগের মতই একই আইটেম" — যা সেই মুহূর্তে ভেঙে যায় যখন তালিকা পুনর্বিন্যাস হয় বা আপনি সামনে থেকে সন্নিবেশ/মুছে ফেলেন:
// 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.
একটি বাস্তব উপসর্গ: ইনপুট এর একটি তালিকা যেখানে একটি সারিতে টাইপ করা মুছে ফেলা / সাজানোর পরে অন্য সারিতে "লাফ" দেয়, কারণ React ভুল <input> পুনরায় ব্যবহার করেছে (এবং এর অভ্যন্তরীণ মান/ফোকাস)।
user.id, একটি slug)।Keys পুনরাবৃত্তি অ্যালগরিদমের একটি ইঙ্গিত; সেগুলি সঠিকভাবে পাওয়া কর্মক্ষমতা এবং উপাদান স্থিতি উভয়ই সঠিক রাখে।