- 1 current stop: learning
- 2 upcoming
- 3 upcoming
- 4 upcoming
- 5 upcoming
Finish after stop 5
Stop 1 of 5 · Conference hall: name-badge desk
Trick to keep in mind+3 XP
A key is a name badge: it lets React recognise the same person after a reshuffle.
When a list re-renders, React needs to know which new item corresponds to which old one, so it can keep each item's DOM node and state attached to the right data. A key supplies that identity. The badge analogy fails in one way: a key only needs to be unique among siblings, and it is for React alone, so the child never receives it as a prop.
Read it once, then a question tests whether the trick stuck.