Kur ju rendre një listë, React ka nevojë të dijë cili element është cili ndërmjet renderjeve në mënyrë që të mund ta rripërdorë, rirenditje, fusuese ose fshijë DOM nyjat në mënyrë të saktë. key është ajo identitet.
{users.map(user => (
<Row key={user.id} user={user} />
))}
Përdorimi i indeksit si çelës u thotë React "artikulli në pozicionin 0 është i njëjti artikull si më përpara" — e cila thyhet në momentin kur lista rirenditet, ose ju futni/fshini nga përpara:
// 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.
Një simptom real: një listë të inputeve ku shkrimi në një rresht "kërcen" në tjetrën pas fshirjes/renditjes, sepse React ripërdori <input> e gabuar (dhe vlerën/fokus të tij të brendshëm).
user.id, një slug).Çelësat janë një këshillë për algoritmin e pajtimit; arritja e tyre e saktë e mban atë dhe performancën dhe gjendjen e komponentit të saktë.