Why React list keys matter (and bad key bugs)

Interview explanation:

• Keys let React identify which child is the "same" between renders.
• Stable keys preserve local component state (input values, focus, animations).
• Unstable keys (array index for reordered lists) can move state to the wrong row.

Bad example (index key with reordering):

{items.map((item, index) => (
  <TodoRow key={index} item={item} />
))}

If one item is inserted at the top, all following rows get new keys and may reuse wrong state.

Better:

{items.map((item) => (
  <TodoRow key={item.id} item={item} />
))}

When index keys are acceptable:

• The list is static (never reordered, inserted, or removed).
• Items have no stable ID and rows are purely presentational (no local state).

Rule of thumb:

• Use stable domain IDs for dynamic lists.
• Treat key selection as a correctness decision, not only a warning fix.