Why this matters
Using array indexes as keys can cause React to recreate the DOM when the order of items changes, negatively affecting performance and state management. Use unique identifiers instead.
Ensure that React list items do not use array indexes as keys. This practice can cause reordering issues and unexpected behavior. Recommend using unique identifiers instead.
Using array indexes as keys can cause React to recreate the DOM when the order of items changes, negatively affecting performance and state management. Use unique identifiers instead.
Side-by-side examples engineers can pattern-match during review.
function Blog(props) {
return (
<ul>
{props.posts.map((post, index) =>
<li key={index}> <!-- Noncompliant: When 'posts' are reordered, React will need to recreate the list DOM -->
{post.title}
</li>
)}
</ul>
);
}function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
}function Blog(props) {
return (
<ul>
{props.posts.map((post, index) =>
<li key={index}> <!-- Noncompliant: When 'posts' are reordered, React will need to recreate the list DOM -->
{post.title}
</li>
)}
</ul>
);
}function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
}From the same buckets as this rule.
All static JS/CSS/font/image files MUST use content-hashed filenames (e.g., app.9c1a7b.js) and be served with "Cache-Control: public, max-age=31536000, immutable". HTML and other non-fingerprinted documents MUST be served with "Cache-Control: no-cache" (or equivalent) to enable conditional revalidation.