למפתחות יש חשיבות

כל רכיב שמוחזר מ־map צריך key, תווית יציבה וייחודית עבור אותו פריט:

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

למה? כשהמערך משתנה, React משווה בין הרשימה החדשה לישנה. המפתחות מציינים לו איזה פריט הוא איזה, כך שהוא מזיז רכיבים במקום לבנות אותם מחדש, ושומר על המצב, המיקוד וההנפשות.

המפתח הטוב ביותר: מזהה אמיתי מהנתונים שלך. אפשרות מקובלת: כל ערך ייחודי ויציב לכל פריט (כמו שמות הפירות שלנו). מוצא אחרון: האינדקס במערך. הוא נשבר כשמשנים את הסדר, כי המיקום אינו זהות.