What are keys in React lists and why are they important?

WHAT THIS TESTS: The interviewer is checking whether you understand that keys are React's mechanism for establishing stable element identity during reconciliation, not merely a lint rule or performance trick. They want to see that you know why identity matters for stateful components, how React matches trees across renders, and what happens when that identity is lost.

A GOOD ANSWER COVERS: First, define a key as a unique string or number passed to list elements that serves as a stable identity token for React. Second, explain that during reconciliation React compares the previous tree with the new one; without keys it uses positional index, but with keys it can recognize items that moved, were added, or were removed regardless of position. Third, stress that correct keys preserve component local state and DOM state such as focus and scroll position because React reuses existing component instances instead of unmounting and remounting them. Fourth, clarify that keys must be stable across renders for the same logical item and unique among siblings, though they do not need to be globally unique across the entire application.

COMMON WRONG ANSWERS: Calling keys a performance optimization rather than a correctness mechanism. Defaulting to array indices without warning that reordering, inserting, or deleting items can cause state bugs and janky UI. Believing keys are available inside the child component as props, which is false. Thinking React can automatically infer keys from object references or array order.

LIKELY FOLLOW-UPS: The interviewer might ask what happens if you use Math.random as a key on every render. They might ask when array indices are actually safe to use as keys. They could probe how keys affect uncontrolled inputs or component state. They may ask whether sibling lists in different parents can reuse the same key values, or how keys differ from refs.

ONE CONCRETE EXAMPLE: Consider a todo list where each item has a persistent database ID and contains a text input. If you map over the array and use each todo's database ID as the key, dragging the first item to the second position causes React to recognize that the identities moved and simply reorder the DOM nodes, preserving focus and any draft text inside the inputs. If you use array indices as keys instead, React sees identical keys in the same positions and updates the text content in place, leaving the first input focused but now displaying the second todo's text, which corrupts the user experience.

Source: react.dev