Skip to content
Preptima
mediumScenarioConceptMidSenior

A user deletes the second row of an editable list and the wrong row now shows the text they typed. What is going on?

A React index key bug happens when list positions are used as identity. Deleting, sorting or filtering shifts positions, so React reuses the wrong component instance and local state appears beside the wrong row.

5 min readUpdated 2026-08-15Target archetype: Big Tech, Enterprise Captive, Product Startup

Answer

Short answer

Do not use array indexes as keys for editable or reorderable React lists. Use a stable item id, or generate a temporary client id before save, so React keeps component state attached to the data item rather than the list position.

Mention reconciliation where it changes the risk, the owner, or the next check. A useful reconciliation point should make the answer more testable, not merely longer. Tie reconciliation back to the scenario so the interviewer can see why it matters here.

Was this answer helpful?

Likely follow-ups

  • Rows have no server identifier until they are saved. Where does the key come from before that?
  • Two rows end up sharing the same key. What does React do, and what does the user see?
  • You want a form to reset when the selected record changes. Why is a key better than an effect that clears the fields?
  • The list is virtualised so only twenty rows are mounted at once. Which of these problems does that change?

Related questions

Further reading

Related Topics