32 lines
1.1 KiB
Plaintext
32 lines
1.1 KiB
Plaintext
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
|
|
|
|
[source,javascript]
|
|
----
|
|
function generateButtons(props) {
|
|
return props.buttons.map((button, index) => {
|
|
<Button key={index}>{button.number}</Button>
|
|
});
|
|
}
|
|
----
|
|
|
|
== Compliant Solution
|
|
|
|
[source,javascript]
|
|
----
|
|
function generateButtons(props) {
|
|
return props.buttons.map((button, index) => {
|
|
<Button key={button.number}>{button.number}</Button>
|
|
});
|
|
}
|
|
----
|
|
|
|
== See
|
|
|
|
* https://reactjs.org/docs/reconciliation.html#recursing-on-children[Recursing On Children] - React API reference
|
|
* S6477
|
|
* S6486
|