Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Keys look like a small syntax detail, but they control component identity. Bad keys cause real UI bugs in lists, forms, animations, and editable rows.
Keys help React match items between renders. A stable key tells React which previous component instance corresponds to which item now. I would use a durable item id from the data model. If I use array index as a key and the list can reorder, insert, delete, or filter, React may preserve local state on the wrong row. That can make inputs, focus, selection, or animations appear attached to the wrong item.