react-key-prop

React list rendering loses component state when items lack stable keys, causing React to mismatch item identity during reconciliation. Using array indices as keys breaks this identity tracking if the list order changes dynamically. You must use stable, unique keys derived from your data.

To fix unstable React list rendering, enforce stable, unique keys on your mapped components. Identify your list rendering code and ensure the key attribute uses a stable, data-derived ID rather than the array index.

You should generate unique IDs for React list items once when the data is initially loaded. Attach these generated IDs directly to the data items before rendering to ensure they remain stable across future re-renders and state updates.

Using the array index as the key prop is only safe for completely static lists that never change order or size. For dynamic lists where items can be inserted, deleted, or reordered, array indices cause state bugs and should be replaced with data-derived IDs.

The best way to assign keys to React lists without natural IDs is to generate them once when the data loads. Attach these generated unique IDs to your data items and use them as the key prop to prevent item identity loss during re-renders.