Lesson 13 of 80
Reconciliation needs to match up list items across renders — the key prop is the only hint you give it, and the wrong hint causes real, hard-to-spot bugs.
12 min read
Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.
Question 1 of 2
A list uses the array index as its key. The first item is deleted. What can go wrong if each list item component has its own internal useState?
Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.
Sign up freeWhat interviewers actually ask about this, and what a strong answer has to cover.
A strong answer covers
Likely follow-ups
When a list re-renders, React has to answer: is this the same item that moved, or a brand-new item? Without keys, React would have no way to tell — it would just compare position by position, assuming index 0 is still "the same" item it was before.
{todos.map((todo) => (
<TodoItem key={todo.id} text={todo.text} /> // stable, unique per item
))}
key tells React's reconciliation (from the reconciliation lesson) exactly which DOM node and component state belongs to which logical item, across renders — even if the list gets reordered, filtered, or has items inserted in the middle.
{todos.map((todo, i) => (
<TodoItem key={i} text={todo.text} /> // 🐛 index as key
))}
Delete the first todo from the list. Every remaining item shifts up one index. React, matching by key, thinks "index 0 is still the same component, just with different text" — so it reuses that component instance instead of unmounting/remounting it. If TodoItem holds its own internal state (like an "editing" flag from a useState), that state now belongs to the wrong todo.
Three items, each key={index}. Item B (index 1) is currently 'editing' — that state lives ON the component at index 1.
<TodoItem key={id} id={id} /> — if you need id inside the component, you must pass it again as a different prop; props.key is never accessible."Why shouldn't you use the array index as a key?" is a near-universal React interview question — the strong answer walks through the exact state-mismatch bug above, connecting keys directly back to how reconciliation actually works.