Interview answer drill

Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more React interview questions

What is the significance of keys in lists in React?Frontend interview answer

HighIntermediateReact

By FrontendAtlas Team · Updated Apr 10, 2026

Interview focus

This React interview question tests whether you can explain React keys in lists: identity bugs, reordered rows, and stable state, connect it to production trade-offs, and handle common follow-up questions.

React keys in lists: identity bugs, reordered rows, and stable state explanation without falling back to memorized docs wording
Lists and Keys reasoning, edge cases, and production failure modes
How you would answer the most likely React interview follow-up

Practice more React interview questions

Interview quick answer

Keys are React's identity contract for list items. Use stable keys to prevent reordered rows, lost input state, random remounts, and production bugs where React preserves the wrong component.

Full interview answer

Overview

Keys are not just a performance hint. In React they define item identity, which is why a bad key can create production bugs: checked boxes jump rows, inputs keep the wrong text after reordering, or a row preserves state that belonged to a different item. Strong answers frame keys as a debugging tool for list correctness, not only as reconciliation trivia.

JSX

function TodoList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

Concept	Explanation
Uniqueness	Each key must be unique among siblings (but not globally).
Identity Tracking	Helps React distinguish between elements when data changes.
Reconciliation	Keys optimize the virtual DOM diffing process by mapping elements efficiently.
Dynamic Updates	Prevents unnecessary re-renders or lost input focus when items reorder.

How keys influence React's rendering behavior

Example: Without Keys
When keys are missing, React may reuse components incorrectly, leading to bugs like mismatched states or input fields swapping values.

JSX

{items.map((item, index) => (
  <li key={index}>{item.text}</li>
))}

Using array indices as keys works for static lists but can cause issues in lists that reorder or update dynamically.

Another footgun: random keys

key={Math.random()} is worse than key={index}. React treats every row as a brand-new component on every render, which means local state resets, effects remount, and memoization cannot help.

JSX

{items.map((item) => (
  <Row key={Math.random()} item={item} /> // ❌ remounts every row each render
))}

{items.map((item) => (
  <Row key={item.id} item={item} /> // ✅ stable identity
))}

Random keys do not just rerender rows. They remount them, so local draft text, checkbox state, focus, and effect subscriptions are all torn down and recreated every render.

When is index acceptable?

If the list is truly static, never reorders, never inserts in the middle, and rows do not hold meaningful local state, an index key can be acceptable. The moment rows can move, be filtered, or contain inputs/checkmarks/animations, use a stable id instead.

JSX

// ❌ Index keys break when rows reorder; typed text and checked state can move to the wrong todo
function SortableTodosBad({ items }) {
  return items.map((item, index) => (
    <label key={index}>
      <input defaultValue={item.text} />
      <span>{item.text}</span>
    </label>
  ));
}

// ✅ Stable ids keep local row state attached to the correct item
function SortableTodosGood({ items }) {
  return items.map((item) => (
    <label key={item.id}>
      <input defaultValue={item.text} />
      <span>{item.text}</span>
    </label>
  ));
}

Best Practices

Use stable and unique identifiers like database IDs for keys.
Avoid using array indices if the list can change order or length.
Do not use random or non-deterministic values as keys — React relies on key consistency across renders.

Performance Insight
Keys allow React’s diffing algorithm (reconciliation) to skip unchanged elements and efficiently patch only modified nodes, improving render speed and stability.

Think of keys like labels on moving boxes — without them, React wouldn’t know which box belongs where after reordering.

Summary

Keys uniquely identify list items during rendering.
They improve performance and prevent re-rendering bugs.
Use stable, unique values like IDs — avoid indices when possible.