QReact · Interview preparation
Why do stable keys matter in React lists?
Keys are not just warning silencers; they tell React which list item is which between renders.
The idea to remember.
A key gives each sibling a stable identity across renders. React uses that identity during reconciliation to match previous and next elements. Unstable keys, such as an array index in a reorderable list, can cause state to move to the wrong item or trigger unnecessary remounts.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: a stable list
01 / BEGINNERA stable ID lets React keep each row's identity.
const todos = [{ id: 1, text: 'Read docs' }, { id: 2, text: 'Build app' }];
function TodoList() {
return <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}Intermediate: intentional reset
02 / INTERMEDIATEChanging a key tells React this is a new form, so its local state resets.
function ProfileEditor({ person }) {
return <ProfileForm key={person.id} person={person} />;
}Real scenario: reorderable tasks
03 / REAL SCENARIOUse database IDs, not array positions, when tasks can move.
function TaskBoard({ tasks, onMove }) {
return tasks.map(task => (
<TaskCard key={task.id} task={task} onMove={() => onMove(task.id)} />
));
}02Check your understanding
Try it in your own words.
Explain why do stable keys matter in React lists without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗