Keys are special string attributes that help React identify which items have changed, been added, or been removed.
They should be unique among siblings and stable over time.
Keys help React's reconciliation algorithm work efficiently by providing a stable identity to each element.
Without keys, React might re-render more elements than necessary.
// Good: Using unique, stable keys {todos.map(todo => (
<li key={todo.id}>{todo.text}</li> ))}// Bad: Using index as key {todos.map((todo, index) => (
<li key={index}>{todo.text}</li> ))}// Bad: Using random keys {todos.map(todo => (
<li key={Math.random()}>{todo.text}</li> ))}