Keys, Reconciliation, and Remounting: The Real Rules

What you’ll learn

• What keys actually do in React (and what they don’t)
• When React preserves state vs remounts
• Why index as key causes subtle production bugs
• Practical rules for stable keys

The job of a key

A key answers one question:

“Is this child the same logical item as before?”

Keys help React match old children to new children during reconciliation.

• Stable key → React preserves component instance + state
• Unstable key → React remounts, losing state (and re-running effects)

The classic bug: index as key

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

If the list changes order (insert at top, sort, filter), React may reuse a Row for the wrong item.

Symptoms:

• Input values jump rows
• “Expanded” state sticks to the wrong item
• Animations glitch

Fix

Use a stable ID from the data:

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

Remounting: how to force it (and when it’s useful)

Sometimes you want a full reset.

Example: reset a form when the user switches accounts.

<Form key={userId} />

Changing the key tells React: “This is a new component. Remount it.”

Interview questions

Q1) Why are keys required?

30-second answer: They let React match items between renders so it preserves state correctly and updates efficiently.

Follow-up: Why is index key dangerous?

Q2) What does changing a key do?

30-second answer: It forces React to treat the component as new and remount it (state reset + effects rerun).

Quick recap

• Keys define identity during reconciliation
• Index keys break when order changes
• Changing key intentionally remounts