react-key-prop

React list rendering loses state when using unstable keys like array indices. Assigning stable, unique data IDs to the key prop ensures React correctly tracks elements across reorders, preventing state-related bugs and UI inconsistencies.

Avoid using array index as the key prop in React lists when the list is dynamic and items can be inserted, deleted, or reordered. Indices cause incorrect component matching, leading to state bugs; use stable data IDs instead.

To generate stable keys for React list items, use unique identifiers from your data objects, such as user.id. This ensures stable UI rendering and efficient updates when mapping arrays to components like li elements.

The best way to troubleshoot list-related state inconsistencies in React is to audit your key props. Replacing array indices with stable, unique data IDs resolves mapping mismatches and restores correct component state management.

Using array index as a key prop is acceptable for static React lists where items are never reordered or mutated. For dynamic lists, stable data IDs are required to prevent state bugs and maintain rendering performance.