لماذا تحتاج إلى خاصية key في React
ستظهر لك هذه الرسالة في وحدة التحكم (console): "Each child in a list should have a unique 'key' prop."
يتجاهلها العديد من المطورين، وهذا خطأ. هذا التحذير ينبهك إلى مشكلات في الأداء وأخطاء برمجية محتملة.
ما هي خاصية key؟
تساعد React في تحديد عناصر معينة داخل القائمة. فهي تخبر React أي عنصر قد تغير، أو تحرك، أو تم حذفه. بدون key ، ستقوم React بإعادة رندرة (re-render) القائمة بأكملها في كل مرة يحدث فيها أي تغيير، مما يؤدي إلى إبطاء تطبيقك.
تخيل مكتبة تحتوي على 1000 كتاب. إذا أضفت كتابًا جديدًا في المنتصف، فسيتعين عليك تحريك كل كتاب آخر لتوفير مساحة. تعمل الـ key بمثابة معرف (ID) فريد لكل كتاب، مما يسمح لـ React بالعثور على المكان المحدد دون الحاجة لتحريك كل شيء آخر.
عملية الـ Reconciliation
تستخدم React خوارزمية "diffing" لمقارنة الـ Virtual DOM الجديد بالقديم.
- تتغير الحالة (State).
- تقوم React ببناء شجرة (tree) جديدة.
- تقارن React بين الأشجار باستخدام الـ
keys. - تقوم React بتحديث العناصر المتغيرة فقط.
الخطأ الشائع: استخدام فهرس المصفوفة (array index) كـ key.
لا تستخدم أبدًا key={index} إذا كانت قائمتك متغيرة. فإذا قمت بإضافة أو حذف عناصر، سيتغير فهرس كل عنصر، مما يربك React ويجعلها تعيد رندرة عناصر لم تتغير في الواقع، وهذا يهدر الذاكرة ويتسبب في أخطاء في واجهة المستخدم (UI).
كيف تعالج ذلك:
- استخدم معرفًا ثابتًا من قاعدة البيانات الخاصة بك (مثل
user.id). - استخدم سلسلة نصية فريدة مثل
uuidإذا كانت بياناتك تفتقر إلى معرف. - تجنب استخدام
Math.random()للمفاتيح؛ فهي تنشئ معرفًا جديدًا عند كل عملية رندرة، مما يجبر المكونات على إعادة التركيب (re-mount) ويسبب وميضًا في واجهة المستخدم (UI flickering).
أفضل الممارسات:
- يجب أن تكون الـ
keysثابتة. - يجب أن تكون الـ
keysفريدة بين العناصر المتجاورة (siblings). - استخدم معرفات قاعدة البيانات للحصول على أفضل أداء.
جدول مقارنة المفاتيح:
• Database ID: موصى به. ثابت وسريع. • Array Index: غير موصى به. يسبب أخطاء أثناء الفرز أو التصفية. • Math.random(): تجنب استخدامه. يسبب عمليات إعادة تركيب (re-mounts) غير ضرورية.
ملخص لسير عملك:
إذا رأيت هذا الخطأ، فهذا يعني أن مكوناتك تفتقر إلى معرف دائم. تحقق من استجابة الـ API الخاصة بك بحثًا عن حقول فريدة مثل البريد الإلكتروني أو المعرف (ID). قم بإصلاح ذلك لتوفير 30-40% من عمليات إعادة الرندرة غير الضرورية.