React Keys and the Wrong-Row State Bug

Keys tell React which sibling in the new list corresponds to which sibling from the previous render. When the component type and key still match at that position, React preserves the component and its state. Change the key, and React treats that subtree as new, so its state starts over.

An array index identifies a position, not the record occupying it. Say each row keeps local input or expanded state. Insert an item at the top and every later record gets a different index. React may now keep the state associated with key={0} while passing that row a different record, so typed text or an expanded panel appears under the wrong item. Deleting, filtering, and reordering can cause the same bug.

Use a stable ID from the data, such as item.id, so the key follows the record when it moves. An index is reasonable for a genuinely fixed list whose items and order never change, though a stable ID is clearer when one exists. A changing or random key is worse because it resets the component on every render. Changing a key deliberately can be useful when a subtree should reset, such as switching between independent forms.