248
list key
also reconciliation key
The key is the item’s identity. The index is the slot, and the slot moves.
What is list key?
A list key tells the renderer which state belongs to which item across renders. A stable id survives insert, delete, sort, and filter. The index does not: state stays in the slot while the item moves. A random key remounts every row every render.
Why does list key matter when vibe coding?
The draft keys a list by index, or by Math.random(). Inputs keep the wrong row’s text after a sort. Or every keystroke remounts the list and the focus is gone.
How do you do list key?
Key by a stable id from the data. Do not key by index unless the list is static and has no state. Do not generate a key while rendering.
How do you ask a model for list key?
Key the list in (screen) by (id field). Do not use the index. Do not use Math.random() or the array position. State inside a row must stay with that id when the list is sorted or filtered.
What goes wrong with list key?
Using the id before the server has assigned one, then replacing it. The row remounts and the draft the user typed is dropped.