What are Keys in React Lists?
Learn what keys are in React lists, why unique stable keys beat array indexes, how they power reconciliation, plus examples and common interview mistakes.
Expected Interview Answer
Keys are special string or number props you give to elements in a list so React can uniquely identify each item and track it across re-renders.
During reconciliation React uses keys to match old and new list children, deciding which items to keep, reorder, add, or remove. Stable, unique keys (like a database id) let React reuse existing DOM nodes and preserve component state. Using the array index as a key is risky when the list can reorder, insert, or delete items, because it ties an element's identity to its position and can cause state to attach to the wrong item.
- Uniquely identifies list items across renders
- Enables efficient reordering and updates
- Preserves component state for the correct item
- Prevents subtle UI bugs in dynamic lists
- Helps React avoid unnecessary re-creation of nodes
AI Mentor Explanation
Think of jersey numbers on players rather than their field positions. Even when the batting order is reshuffled, the scorer tracks each player by their permanent number, so runs and wickets always attach to the right person no matter where they stand in the lineup.
Step-by-Step Explanation
Step 1
Render a list
Use map() to turn an array into a list of elements.
Step 2
Assign a key
Give each element a key prop using a stable, unique identifier from your data.
Step 3
React matches items
On re-render, React pairs old and new items by their keys during reconciliation.
Step 4
Reuse or update
Matched items keep their DOM and state; new keys are created and missing keys removed.
Step 5
Avoid index keys
For lists that reorder or change, prefer ids over array indexes to prevent state bugs.
What Interviewer Expects
- Definition of keys as unique identifiers for list items
- Understanding how keys drive reconciliation of lists
- Why array index keys are risky in dynamic lists
- That keys must be unique among siblings, not globally
- How keys preserve component state and inputs
Common Mistakes
- Using the array index as a key in reorderable lists
- Using a random value like Math.random() as a key each render
- Thinking keys are passed down as a readable prop to the component
- Making keys unique globally instead of just among siblings
Best Answer (HR Friendly)
“Keys are unique labels React puts on each item in a list so it can tell them apart when the list changes. With good keys, React updates only the items that changed and keeps everything else in the right place.”
Code Example
function UserList({ users }) {
return (
<ul>
{users.map((user) => (
// Use a stable unique id, not the array index,
// so items keep the right state when the list reorders.
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}Follow-up Questions
- Why should you avoid using the array index as a key?
- Do keys have to be globally unique or just unique among siblings?
- Can you read the key prop inside the child component?
- What bugs can appear when keys are unstable across renders?
- How do keys interact with component state in a list?
MCQ Practice
1. What is the main purpose of a key in a React list?
Keys give React a stable identity for each list item so it can match them across renders during reconciliation.
2. Which is the best choice for a key in a reorderable list?
A stable, unique id keeps each item's identity consistent even when the list reorders, unlike index or random values.
3. Keys must be unique:
React only requires keys to be unique among siblings in the same array, not globally across the app.
Flash Cards
What are keys in React? — Unique string or number props on list items that let React identify and track them across renders.
Why avoid array index as a key? — Index ties identity to position, so reordering or inserting items can attach state to the wrong element.
How unique must keys be? — Unique among sibling elements in the same list, not globally across the whole app.
Can a child read its own key? — No — key is used by React internally and is not passed to the component as a readable prop.