44 lines
933 B
Plaintext
44 lines
933 B
Plaintext
== Why is this an issue?
|
|
|
|
React expects a unique identifier `key` in list components to optimize rendering. Missing keys will negatively impact performance and can bring your application to a halt when there are enough elements. Avoid `Array` indexes since they are not stable. Instead, use a unique attribute like an ID or a combination of attributes.
|
|
|
|
=== Noncompliant code example
|
|
|
|
[source,javascript]
|
|
----
|
|
function Blog(props) {
|
|
return (
|
|
<ul>
|
|
{props.posts.map((post) =>
|
|
<li>
|
|
{post.title}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
);
|
|
}
|
|
----
|
|
|
|
=== Compliant solution
|
|
|
|
[source,javascript]
|
|
----
|
|
function Blog(props) {
|
|
return (
|
|
<ul>
|
|
{props.posts.map((post) =>
|
|
<li key={post.id}>
|
|
{post.title}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
);
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
* https://reactjs.org/docs/reconciliation.html#recursing-on-children[Recursing On Children] - React API reference
|
|
* S6479
|
|
* S6486
|