What warning do you get if you forget the key prop in a list, and what does it cost?
React logs a warning that each child in a list needs a unique key. It falls back to using index, so the list still renders, but reordering can cause wrong state reuse and unnecessary DOM updates.
Explain it simply
When you map an array to elements, React needs a name tag for every element so it can match old and new lists. Without tags it logs "Each child in a list should have a unique key prop" and guesses by position.
The list still shows up, so the warning is easy to ignore, but the guess is the same as using the index: fine for append-only lists, wrong when items move or get removed.
Put the key on the outermost element returned inside map, not on an inner element. If you return a Fragment, use <Fragment key={id}>.
Example
const items = [{ id: 7, name: "Samosa" }, { id: 9, name: "Chai" }];
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>Keys only need to be unique among siblings, not across the whole app.
What to say in the interview
"React warns because it cannot match old and new items reliably. It falls back to position, so it works for static lists but can mix up state when order changes. I add a stable key to the outermost element returned in the map."
Common mistakes
- Placing the key on a child inside the mapped element instead of the outermost one.