Render arrays with .map(). Each sibling in a list needs a stable key so React can match items across renders when order changes.
Keys
- Use stable IDs from data (
user.id), not array index—unless the list is static and never reordered. - Keys are hints for reconciliation—they do not appear in the DOM.
- Do not generate random keys on every render.
{items.map((item) => (
<li key={item.id}>{item.label}</li>
))}Important interview questions and answers
- Q: Why not use index as key?
A: Reordering, inserting, or deleting items can cause wrong component state to stick to the wrong row. - Q: Where do keys go?
A: On the outermost element returned from the map callback—not on the fragment unless it has a key prop.
Self-check
- What happens if you omit keys in development?
- When is index-as-key acceptable?
Pitfall: Using array index as key breaks when items reorder, insert, or delete—use stable ids from your data.
Interview prep
- Why do keys matter in lists?
Keys identify items across renders—use stable ids, not random values or index when order can change. Wrong keys lose focus and state.