What are keys in React, and why are they important?

Direct answer

Keys are stable identifiers for sibling elements in a rendered collection that help React match each item with the same item across inserts, removals, and reordering.

A good key comes from the data itself, such as a database ID. Keys must be unique among siblings and should remain stable between renders.

TodoList.jsx

{todos.map((todo) => (
  <TodoItem key={todo.id} todo={todo} />
))}