Frontend · interactive

Reconciliation and keys

When a list re-renders, React matches old and new items by key and reuses the matching DOM, including any state inside it. Use the array index as the key and inserting at the top shifts every match by one. These two lists are real React; try it.

key={index}

key={item.id}

Both lists look the same. Edit a note if you like, then insert Zoe at the top.

Each row keeps its note in its own useState, which React preserves by key.

Step 1 of 4 · read left to right

1
Render, then diff
React compares the new element tree with the previous one and changes only what differs.
That's reconciliation.
2
Keys say which item is which
Same key: same component, keep its DOM and state. New key: create. Missing key: destroy.
Keys only need to be unique among siblings.
3
Index keys break on insert, delete, sort
Positions change but keys don't follow the data, so state ends up on the wrong row.
Fine only for static lists.
4
Change the key to reset state
Giving a component a new key throws away its state on purpose: a form keyed by user id resets when the user changes.
<Profile key={userId} />

In production

Tools and technologies

Keys are how React matches list items between renders.

Not tied to one language — use these names when you search docs or design a system.