Why Should You Not Use Index as a Key in React?
Understand why using array index as a key in React causes reorder bugs and stale state, how reconciliation uses keys, and when index keys are safe.
Expected Interview Answer
Using the array index as a key is risky because when the list is reordered, filtered, or has items inserted or removed, the index no longer maps to the same item, so React reuses the wrong DOM nodes and component state, causing subtle bugs.
React uses keys to identify which list items changed, moved, or were removed between renders. A stable, unique key tied to the data's identity lets React match old and new elements correctly. With an index, the key of a given item changes whenever the list order changes, so React may keep a stale input value, checkbox state, or animation on the wrong row. Indexes are only safe when the list is static — never reordered, filtered, or edited.
- Correct DOM reuse when lists reorder or change
- Preserves per-item component state on the right item
- Avoids stale or mismatched input values
- Prevents subtle animation and focus bugs
- More efficient, predictable reconciliation
AI Mentor Explanation
Using an index as a key is like numbering players purely by batting position instead of by name. When a wicket falls and the order shifts, position 3 now means a different player, so any stats you pinned to 'number 3' suddenly attach to the wrong batter.
Step-by-Step Explanation
Step 1
Understand the role of keys
React uses keys to match elements across renders and decide what to reuse, move, or destroy.
Step 2
See how index breaks identity
When the list reorders or an item is removed, an index points to a different item than before.
Step 3
Spot the symptoms
Watch for stale input values, wrong checkboxes, or state stuck on the wrong row after a change.
Step 4
Use a stable id
Key each item by a unique, stable identifier from the data, such as a database id.
Step 5
Know the safe exception
Index keys are acceptable only for static lists that never reorder, filter, or change length.
What Interviewer Expects
- Understanding why React needs keys during reconciliation
- Explaining how index keys break item identity on reorder
- Giving a concrete bug caused by index keys
- Knowing to use stable unique ids instead
- Naming the narrow case where index is acceptable
Common Mistakes
- Claiming keys are only for silencing the console warning
- Using index keys on a list that can reorder or be filtered
- Generating a fresh key with Math.random on every render
- Using a non-unique field as the key
- Believing keys are passed into the component as a prop
Best Answer (HR Friendly)
“React needs a stable label for each item in a list so it knows which one changed. If you label items by their position number, that number moves around when the list is sorted or edited, so React can confuse one item for another. Using each item's own unique id avoids these bugs.”
Code Example
// Risky: breaks when the list reorders or filters
{todos.map((item, index) => (
<TaskRow key={index} task={item} />
))}
// Correct: stable, unique identity from the data
{todos.map((item) => (
<TaskRow key={item.id} task={item} />
))}Follow-up Questions
- What does React's reconciliation algorithm use keys for?
- When is it actually safe to use an index as a key?
- Why is Math.random() a bad choice for a key?
- What bug appears if two siblings share the same key?
- Is the key prop accessible inside the child component?
MCQ Practice
1. Why can index keys cause bugs?
When items move, an index maps to a different item, so React reuses DOM and state on the wrong element.
2. When is using an index key acceptable?
If the list is fixed and never reordered or edited, the index is stable and safe to use as a key.
3. What is the best choice for a key?
A stable, unique identifier tied to the item's identity lets React match elements correctly across renders.
Flash Cards
What are keys used for in React? — To identify which list items changed, moved, or were removed during reconciliation.
Why avoid index as a key? — The index changes on reorder or removal, so React reuses the wrong DOM and state.
When is an index key safe? — Only for static lists that never reorder, filter, or change length.
Why is Math.random() a bad key? — It changes every render, forcing React to destroy and recreate every item needlessly.