react-key-prop

React list components lose state during reordering when using array indices as keys. The key prop guides React's reconciliation process, and unstable keys cause it to incorrectly match elements, leading to state corruption and rendering bugs.

The best way to assign a key prop in React is by using stable, unique data IDs from your dataset, such as a database ID. This ensures efficient rendering and prevents state bugs when list items are added, removed, or reordered.

You should avoid using array indices as keys in React lists whenever the list is dynamic. Indices are anti-patterns for lists that can be reordered or modified, because they break React's reconciliation principles and cause incorrect component state matching.

To fix list rendering performance issues in React, ensure each mapped component has a stable, unique key prop. Proper key assignment allows React's reconciliation algorithm to efficiently update the DOM without re-rendering unchanged components.

Random keys are not safe for React list rendering because they are unstable. Generating new random keys on each render forces React to destroy and recreate list item components, which severely degrades frontend performance and resets internal state.