What is a Key in React Lists?
Learn what the key prop does in React lists, why it must be stable and unique, and why using array indexes as keys can cause subtle rendering bugs.
Expected Interview Answer
A key is a special string prop you give each element in a list so React can uniquely identify it across renders, allowing efficient and correct updates when items are added, removed, or reordered.
When rendering an array with .map(), React needs a stable identity for each item to compare the previous render's list against the new one during reconciliation. Without keys, or with array indexes as keys when the list can reorder, React may misattribute component state or DOM nodes to the wrong item, causing subtle bugs like inputs retaining the wrong value. A good key is a stable, unique identifier tied to the data itself, such as a database ID, not the item's position in the array. Keys are only used internally by React for reconciliation; they're not accessible as a regular prop inside the component.
- Enables correct, efficient list reconciliation
- Preserves component state tied to the right item
- Prevents visual glitches on reorder/insert/delete
- Signals stable identity independent of position
- Improves rendering performance for large lists
AI Mentor Explanation
A key is like each player's fixed squad number stitched on their jersey, not their current batting position in the order. When the batting lineup gets reshuffled, the scoreboard still tracks each player correctly by their number rather than confusing whoever currently stands at position four.
Step-by-Step Explanation
Step 1
Map over the array
Use .map() to transform data items into JSX elements.
Step 2
Choose a stable identifier
Pick a unique, stable value from the data itself, like an id field, not the array index.
Step 3
Add the key prop
Pass that identifier as the key prop on the outermost element returned for each item.
Step 4
React reconciles by key
On the next render, React matches old and new elements by key to decide what to update, move, or remove.
Step 5
Avoid index keys on reorderable lists
Using array indexes as keys can misattribute state when items are added, removed, or reordered.
What Interviewer Expects
- Explains keys give list items stable identity
- Knows keys must be unique among siblings
- Warns against index keys for dynamic/reorderable lists
- Understands keys affect reconciliation, not rendering output directly
- Can describe a bug caused by missing or bad keys
Common Mistakes
- Using array index as key for lists that can reorder
- Omitting keys entirely and relying on React's warning being harmless
- Using non-unique or randomly generated keys on every render
- Believing keys are accessible as a prop inside the child component
- Assuming keys only affect performance, not correctness
Best Answer (HR Friendly)
“A key is a unique label React uses behind the scenes to keep track of items in a list, especially when the list changes order or items get added or removed. Using good keys prevents strange bugs, like an input box showing the wrong value after the list updates.”
Code Example
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
// Use todo.id, a stable identifier, not the array index
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}Follow-up Questions
- Why is using array index as a key problematic?
- What bug can occur from missing keys in a list of forms?
- Can a key be accessed as a prop inside the component?
- How does React use keys during reconciliation?
- What makes a good candidate for a key value?
MCQ Practice
1. Why does React require keys in lists?
Keys give React a stable identity for each item so it can correctly match old and new elements during reconciliation.
2. When is using the array index as a key risky?
Index keys break down when list order changes, since the index no longer corresponds to the same underlying data item.
3. Can a component access its own key as a prop?
The key prop is reserved for React's internal reconciliation and is not passed down as a regular prop.
Flash Cards
What is a key in a React list? — A unique identifier prop that helps React track list items across renders.
Why avoid using array index as a key? — Because reordering, inserting, or removing items can misattribute state to the wrong element.
What makes a good key value? — A stable, unique identifier from the data itself, like a database ID.
Can you read a key inside the child component via props? — No, keys are reserved for React's internal reconciliation and aren't exposed as props.