لماذا تحتاج عناصر القائمة إلى مفتاح (key)، ولماذا لا نستخدم الفهرس (index)؟

عندما تقوم بعرض قائمة، يحتاج React إلى طريقة لمعرفة أي عنصر هو أي عنصر بين عمليات الرسم المختلفة حتى يتمكن من إعادة استخدام أو إعادة ترتيب أو إدراج أو حذف عقد DOM بشكل صحيح. key هو هذا الهوية.

{users.map(user => (
  <Row key={user.id} user={user} /> // stable, unique id
))}

لماذا فهرس المصفوفة محفوف بالمخاطر

استخدام الفهرس كمفتاح يخبر 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).
• الفهرس مقبول فقط لقائمة ثابتة لا تتغير أو تُدرج أو تُحذف.
• يجب أن تكون المفاتيح فريدة بين الأخوات (وليس عالمياً).

المفاتيح هي تلميح لخوارزمية التوفيق؛ الحصول عليها بشكل صحيح يحافظ على الأداء وحالة المكون.