Όταν κάνετε render μια λίστα, το React χρειάζεται ένα τρόπο να γνωρίζει ποιο στοιχείο είναι ποιο μεταξύ των renders, ώστε να μπορεί να επαναχρησιμοποιήσει, να αναδιατάξει, να εισαγάγει ή να διαγράψει σωστά τους κόμβους DOM. Το key είναι αυτή η ταυτότητα.
{users.map(user => (
<Row key={user.id} user= />
))}
Η χρήση του δείκτη ως κλειδί λέει στο React "το στοιχείο στη θέση 0 είναι το ίδιο στοιχείο με πριν" — που σπάει τη στιγμή που η λίστα αναδιατάσσεται ή εισάγετε/διαγράφετε από το μπροστά:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Ενα πραγματικό σύμπτωμα: μια λίστα εισαγωγών όπου η πληκτρολόγηση σε μια σειρά "πηδά" σε άλλη μετά τη διαγραφή/ταξινόμηση, επειδή το React επαναχρησιμοποίησε το λάθος <input> (και την εσωτερική του τιμή/εστίαση).
user.id, ένα slug).Τα κλειδιά είναι μια υπόδειξη για τον αλγόριθμο συμφιλίωσης. η σωστή τους λήψη κρατά τόσο την απόδοση όσο και την κατάσταση του συστατικού σωστή.