VocalHyre
Sign up

React · Frontend system thinking

Why are keys important when rendering lists?

MediumkeyslistsreconciliationUpdated Oct 2026
Quiz this track

Short answer

Keys give list items a stable identity. React uses them to match elements across renders, preserve component state and avoid unnecessary remounts when items move.

During reconciliation, React compares siblings. Without keys, it relies on position. With keys, it can tell that an item moved rather than that every item changed.

jsx
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

Why index keys fail

jsx
todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />
));
After deleting the first item, every remaining item gets a different index, so React reuses the wrong component state.
  • Keys must be unique among siblings, not globally
  • Keys are not passed to the component as a prop
  • Use stable IDs from the data, not random values created during render
  • Keys are also useful to reset a component intentionally when the identity changes
Index keys are acceptable for static lists that never reorder, filter or insert. For dynamic lists, use a stable id.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1Why can index keys cause bugs when items reorder?
  2. 2Are keys passed to the child component?
  3. 3Can you use a key to reset component state?
  4. 4What makes a good key?

Say it in the interview

Keys give siblings a stable identity during reconciliation. React uses them to reuse the right DOM and component state when a list changes. Index keys break when items reorder or are inserted, because the index no longer identifies the same item. I use stable IDs from the data. Keys are scoped to siblings and are not passed to the component as a normal prop.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

MediumHow does the virtual DOM and reconciliation work?EasyWhy does React prefer composition over inheritance?MediumWhy is React state described as a snapshot?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.

Start a free React interviewBrowse all questions