Why do we need keys in React lists?
Quick answer
Keys give each list item a stable identity so React can match items between renders and correctly add, remove or reorder them without recreating or mixing up their state.
When React diffs two lists it needs to know which new item corresponds to which old one. Without keys it falls back to matching by position, so inserting an item at the top makes every item look changed, and local state such as an input's text can end up attached to the wrong row.
A key must be unique among siblings and stable across renders. Use an ID from your data. Using the array index is acceptable only for static lists that are never reordered, filtered or inserted into. Never use Math.random(), since a new key on every render makes React remount every item.
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} /> // stable ID, not the index
))}