Rendering lists and why keys matter

Model answer. Render lists by mapping data to elements, giving each a stable, unique `key`:

<ul>
  {students.map(s => <li key={s.id}>{s.name}</li>)}
</ul>

Why keys: during reconciliation, React uses keys to match each item in the new list with the same item in the old list. With correct keys, inserting, deleting or reordering items moves the existing DOM nodes and their component state along with the data.

Why the index is risky: the index describes a position, not an item. If you insert at the top, delete, sort or filter, every item's index shifts, so React thinks item 0 is still item 0 and reuses the wrong component state. Typical symptoms: text typed into one row's input appears in a different row; a checkbox stays ticked on the wrong item; animations jump.

Rules:

• Use an id from the data (database id, slug).
• Keys only need to be unique among siblings.
• The index is acceptable only for static lists that never reorder or change.
• Never generate keys with Math.random() during render: every render gets new keys, so React remounts everything.