Lesson 12 — Lists & keys

Good keys

A key tells React which item is which between renders. The best key is a stable, unique ID from your data (like a database id). Using the array index as the key breaks when items are added, removed or re-ordered — React may reuse the wrong element and keep the wrong input text.

users.map((u) => <li key={u.id}>{u.name}</li>)

Why it matters: wrong keys cause strange bugs in lists, such as a checkbox staying ticked on the wrong row.