أهمية المفاتيح (Keys)

كل عنصر يتم إرجاعه من map يحتاج إلى key، وهو معرف فريد وثابت لهذا العنصر:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

لماذا؟ عندما تتغير المصفوفة، يقوم React بمقارنة القائمة الجديدة بالقائمة القديمة. تُخبره الـ keys بأي عنصر هو أيهما، بحيث ينقل العناصر بدلاً من إعادة بنائها، مما يحافظ على الحالة (state) والتركيز (focus) والرسوم المتحركة (animations) سليمة.

أفضل `key`: معرّف حقيقي من بياناتك. المقبول: أي قيمة فريدة وثابتة لكل عنصر (مثل أسماء الفاكهة لدينا). ملاذ أخير: المفهَم (index) الخاص بالمصفوفة. حيث يتسبب في كسر إعادة الترتيب، لأن الموقع ليس هو الهوية.