Keys: how React tracks list items

Keys: how React tracks list items

When a list re-renders, React must match each new item to an old one to reuse DOM instead of rebuilding it. Position alone is unreliable, items get inserted, removed, and reordered. The key prop gives each item a stable identity:

{tasks.map(task => (
  <TaskItem key={task.id} title={task.title} />
))}

Rules for a good key:

• Stable: the same item keeps the same key across renders. Database ids are ideal.
• Unique among siblings: no two items in the same list share a key.
• Not the array index, whenever the list can reorder, insert, or delete. If item 0 is deleted, every remaining item's index shifts by one, and React matches old state to the wrong items.