Keys & List Diffing
Keys are special string attributes that help React identify which items in a list have changed, been added, or been removed. They must be stable, unique among siblings, and not change between renders.
Keys are name tags at a party — without them, React just matches people by where they're standing (index). With name tags, it can track who moved, who left, and who's new.
Good keys are stable IDs from your data (database ID, UUID). Bad keys are array indexes (break on reorder/insert/delete) or Math.random() (forces remount every render, destroying state). Keys also serve as a reset mechanism: changing a component's key forces React to unmount and remount it with fresh state. This is useful for resetting forms or animations. Keys only need to be unique among siblings, not globally.
React's list diffing uses keys to build an internal map for O(1) lookups when matching old children to new children. Without keys, React falls back to index-based matching, which is only correct for static, non-reorderable lists. The key must be derivable from the data, not the rendering context. When you key a component with a changing value (like a selected user ID), it forces a complete remount — this is the 'key as state reset' pattern, often cleaner than useEffect-based resets.
Keys tell React which list items are stable across renders, enabling efficient reordering without unnecessary DOM mutations. I always use stable data IDs, never array indexes for dynamic lists. A powerful pattern is using key as a reset trigger — changing a component's key forces a full remount with fresh state, which is cleaner than manual cleanup in useEffect.
Using index as key seems to work for static lists, but causes subtle state bugs the moment the list is filtered, sorted, or items are inserted. The state 'sticks' to the index position, not the data item.