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.
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
- A transform has been writing wrong revenue figures for three days and six downstream tables have consumed it. How do you backfill the corrected data without double-counting anything?hardAlso on reconciliation4 min
- Your nostro reconciliation shows a break this morning. How do you investigate it, and how do you know when the money has actually gone?hardAlso on reconciliation6 min
- A client says your position does not match their custodian statement. How do you work out who is right, and what does a corporate action do to that answer?mediumAlso on reconciliation5 min
- A small percentage of your transaction reports are rejected every day and the team resubmits them the next morning. Is that acceptable?hardAlso on reconciliation6 min