Master React Lists and Keys
רינדור רשימות ב-React הוא פשוט, אבל לעשות זאת נכון זה קשה.
מפתחים רבים משתמשים באינדקס המערך כמפתח (key). זו טעות. זה מוביל לבאגים ולביצועים איטיים.
כך עליכם לנהל נתונים דינמיים ב-React.
How React Uses Lists
React משתמשת במתודה map() כדי להפוך מערכים לאלמנטים של ממשק משתמש (UI). כשמשתמשים ב-map(), React הופכת כל פיסת נתונים לרכיב (component).
The Role of Keys React משתמשת ב-Virtual DOM. כאשר הנתונים משתנים, React משווה את הנתונים החדשים לנתונים הישנים. תהליך זה נקרא reconciliation.
מפתחות משמשים כמזהים ייחודיים. הם אומרים ל-React בדיוק איזה פריט השתנה, עבר מקום או נמחק.
Why Using Index as a Key is Dangerous שימוש באינדקס (0, 1, 2...) כמפתח גורם לשלוש בעיות עיקריות:
- שגיאות במצב הרכיב (Component State): אם ממיינים רשימה, שדות קלט או תיבות סימון (checkboxes) עלולים להציג נתונים מפריט לא נכון.
- ירידה בביצועים: React אינה יכולה לעקוב אחרי זהות הפריטים. לעיתים קרובות היא מבצעת רינדור מחדש (re-render) לכל הרשימה במקום רק לפריט אחד.
- באגים ויזואליים: ממשק המשתמש עשוי להיראות תקין, אך הלוגיקה הפנימית תיכשל כאשר הפריטים יזוזו.
The Right Way to Use Keys כדי לשמור על האפליקציה שלכם מהירה ויציבה, עקבו אחר הכללים הבאים:
- השתמשו במזהים ייחודיים (Unique IDs): השתמשו תמיד במזהים (IDs) מהדאטה-בייס שלכם (כמו UUID או מפתח ראשי/primary key).
- לעולם אל תשתמשו ב-
Math.random(): יצירת מפתחות במהלך הרינדור גורמת ל-React ליצור מחדש כל אלמנט בכל עדכון. זה הורס את הביצועים. - שמרו על מפתחות יציבים: מפתח חייב להישאר זהה עבור אותה פיסת נתונים לאורך כל מחזור החיים שלה.
Comparison at a Glance
תכונה: יציבות שימוש באינדקס: לא יציב שימוש במזהה ייחודי: יציב מאוד
תכונה: ביצועים שימוש באינדקס: גרועים שימוש במזהה ייחודי: אופטימליים
תכונה: בטיחות המצב (State Safety) שימוש באינדקס: לא בטוח שימוש במזהה ייחודי: בטוח ב-100%
Summary for Developers
השתמשו במתודה map(). העבירו מזהה (ID) ייחודי ויציב ל-key prop. הימנעו משימוש באינדקס המערך עבור כל רשימה שיכולה להשתנות, להיומיין או להיות מסוננת.