React expects a unique identifier for performance optimizations. An array index is not a stable identifier most of the time. This results in
unnecessary renders when the array items change index following some mutation. When components have state, this might also provoke bugs that are hard
to diagnose.
We recommend using an explicit identifier to avoid misuse and accidental re-renders. If there is no unique attribute available, consider
concatenating existing properties - hashing them if necessary - or creating a dedicated unique identifier.
Noncompliant Code Example
function generateButtons(props) {
return props.buttons.map((button, index) => {
<Button key={index}>{button.number}</Button>
});
}
Compliant Solution
function generateButtons(props) {
return props.buttons.map((button, index) => {
<Button key={button.number}>{button.number}</Button>
});
}
See
