What are React keys and why are they important?

Short answer: React keys help React identify which items in a list are changed, added, or removed. Keys provide a stable identity for each element, allowing React to optimize re-renders. Important: Keys should be unique for each sibling component. Why important: Without keys, React has to re-render all list items when the list changes, which can be inefficient.

Example code

const items = ['apple', 'banana', 'cherry']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); Tip: It’s better to use a unique identifier (e.g., id) as a key instead of using index if the list can change order or content dynamically.

Real-world example (ShopNest)

When rendering cart lines, use a stable key={item.id}—not the array index—so React updates the right row after delete.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.