React: What are keys in React?

Keys are unique identifiers for elements in a list that help React understand which element is which during updates.

Simple analogy: Imagine you are arranging books on a shelf. Each book has an ISBN (key). When you:

• Add a new book — React sees a new ISBN and adds it.
• Remove — sees that the ISBN is gone and removes it.
• Change order — sees by ISBN which book moved where, and simply moves it.

Without keys React will think: "All books are new! I'll delete everything and redraw." With keys: "Ah, this is the same book, just moved."

Key rules:

1todos.map((todo, index) => <TodoItem key={index} />);
2todos.map(todo => <TodoItem key={todo.id} />);

What key should be:

1. Unique among siblings — two elements in the same list cannot have the same key.
2. Stable — key should not change between renders.
3. Predictable — the same element should always have the same key.

When index is acceptable:

• The list never changes (static).
• No insert/delete/sort operations.

Important: If you change the key — React will create a new component "from scratch" (reset state).