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