Why do we need keys in React lists?

Question

Accepted Answer

Keys are special string attributes you must add when rendering a list of elements. They give React a stable identity for each item across renders, so the diffing algorithm can match, reorder, and reuse DOM nodes correctly instead of recreating them. Use stable IDs — primary keys from data are best ( user.id , todo.id ). Avoid array index — if items can be reordered, inserted, or removed, indices cause wrong reuse and subtle bugs (focus loss, wrong inputs). Unique among siblings — keys only need to be unique within their immediate list, not globally. Performance — without good keys React may unmount and remount components, losing state and DOM focus. Not a prop — key is consumed by React and not visible to the component itself. Explain the concrete bug: index keys + reordering = mixed up checkbox states. Then explain the fix: stable unique IDs. This shows you understand not just the rule but why it exists.