Keys Matter

Every element returned from map needs a key, a stable, unique label for that item:

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

Why? When the array changes, React compares the new list with the old one. Keys tell it which item is which, so it moves elements instead of rebuilding them, keeping state, focus and animations intact.

Best key: a real id from your data. Acceptable: any value unique and stable per item (like our fruit names). Last resort: the array index. It breaks reordering, because position isn't identity.