Concept questionMedium~7 minFrontend Foundations / 4 of 30

Interview question

Why do keys matter when rendering lists in React?

Explain React keys and component identity

Explains why list keys matter for reconciliation, state preservation, reordering, and predictable UI behavior.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Keys help React match items between renders. A stable key tells React which previous component instance corresponds to which item now. I would use a durable item id from the data model. If I use array index as a key and the list can reorder, insert, delete, or filter, React may preserve local state on the wrong row. That can make inputs, focus, selection, or animations appear attached to the wrong item.

Full answer below

Practice focus

React reconciliation, stable keys, component identity, local state preservation, reordering, and list bugs.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Keys look like a small syntax detail, but they control component identity. Bad keys cause real UI bugs in lists, forms, animations, and editable rows.
Keys help React match items between renders. A stable key tells React which previous component instance corresponds to which item now. I would use a durable item id from the data model. If I use array index as a key and the list can reorder, insert, delete, or filter, React may preserve local state on the wrong row. That can make inputs, focus, selection, or animations appear attached to the wrong item.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would think about keys as identity, not just uniqueness. A key only needs to be unique among siblings, but it also needs to remain stable for the same logical item. Sometimes changing a key intentionally resets component state, for example resetting a form when editing a different record. For generated client-side items before save, I would create a temporary client id and replace or map it carefully after the server returns a real id.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch for list bugs after sorting, filtering, pagination, optimistic create, and drag-and-drop. Tests that edit one row and then reorder the list can catch bad key choices. Keys also matter for performance because unstable keys cause unnecessary unmounting and remounting. If rows hold expensive child components, focus, or unsaved draft state, stable keys become a correctness requirement, not only a warning fix.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using array index as key for a reorderable or filterable list.
Generating random keys on every render.
Treating keys as only a way to silence warnings.
Forgetting that changing a key resets component state.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot connect keys to component identity.
Inputs show values from the wrong row after filtering.
Optimistic rows lose state when server ids arrive.
List rendering depends on accidental array order.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When is index as key acceptable?
How can a key intentionally reset a form?
What happens to local row state after reordering?

Continue the section

Next in Frontend Foundations: State Update Mechanics

Step 5 of 30

State updates, batching, and functional setters

Opening drill

Concept questionMedium~7 minFrontend Foundations / 4 of 30

Interview question

Why do keys matter when rendering lists in React?

Explain React keys and component identity

Explains why list keys matter for reconciliation, state preservation, reordering, and predictable UI behavior.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

React reconciliation, stable keys, component identity, local state preservation, reordering, and list bugs.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Keys look like a small syntax detail, but they control component identity. Bad keys cause real UI bugs in lists, forms, animations, and editable rows.
Keys help React match items between renders. A stable key tells React which previous component instance corresponds to which item now. I would use a durable item id from the data model. If I use array index as a key and the list can reorder, insert, delete, or filter, React may preserve local state on the wrong row. That can make inputs, focus, selection, or animations appear attached to the wrong item.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would think about keys as identity, not just uniqueness. A key only needs to be unique among siblings, but it also needs to remain stable for the same logical item. Sometimes changing a key intentionally resets component state, for example resetting a form when editing a different record. For generated client-side items before save, I would create a temporary client id and replace or map it carefully after the server returns a real id.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would watch for list bugs after sorting, filtering, pagination, optimistic create, and drag-and-drop. Tests that edit one row and then reorder the list can catch bad key choices. Keys also matter for performance because unstable keys cause unnecessary unmounting and remounting. If rows hold expensive child components, focus, or unsaved draft state, stable keys become a correctness requirement, not only a warning fix.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using array index as key for a reorderable or filterable list.
Generating random keys on every render.
Treating keys as only a way to silence warnings.
Forgetting that changing a key resets component state.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot connect keys to component identity.
Inputs show values from the wrong row after filtering.
Optimistic rows lose state when server ids arrive.
List rendering depends on accidental array order.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When is index as key acceptable?
How can a key intentionally reset a form?
What happens to local row state after reordering?

Continue the section

Next in Frontend Foundations: State Update Mechanics

Step 5 of 30

State updates, batching, and functional setters

Why do keys matter when rendering lists in React?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

Why do keys matter when rendering lists in React?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section