لماذا تعتبر الـ Keys مهمة جداً عند عرض القوائم وما مخاطر استخدام فهرس المصفوفة (Index) كـ Key؟

الإجابة المختصرة

المفاتيح (Keys) تمكّن ريأكت من معرفة هوية العناصر الفريدة بين عمليات إعادة التصيير لمعرفة أيها أضيف أو أزيل أو تم تحريكه؛ استخدام الـ Index يؤدي لمشاكل في الحالة واختلال ترتيب المدخلات عند التعديل.

الشرح

تعتمد خوارزمية الـ Diffing على الـ Key لمطابقة المكونات الفرعية عبر دورات الـ render. إذا استخدمت index المصفوفة كـ key وتمت إضافة عنصر في بداية القائمة أو حذف عنصر في المنتصف، يتغير فهرس جميع العناصر التالية، مما يجعل ريأكت تعيد استخدام نفس حالات المكونات الداخلية (مثل عناصر الـ input والـ animations) مع بيانات خاطئة.

مثال بالكود

// الاستخدام السليم: استخدام معرف فريد وثابت
function TodoList({ todos }: { todos: { id: string; text: string }[] }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

أخطاء شائعة

• استخدام Math.random() كـ key، مما يجبر ريأكت على تدمير وإعادة إنشاء الشجرة في كل render.

أسئلة متابعة

• ما هو Virtual DOM في ريأكت وكيف يعمل خوارزمية الـ Reconciliation (Diffing)؟
• ما هي الـ Portals في ريأكت ومتى يجب استخدامها؟

المصادر

• React docs — Rendering Lists