Why this matters
React uses keys to optimize list rendering. Missing keys cause unnecessary re-renders and can lead to state inconsistencies.
Check that JSX list components have unique key properties. Missing keys can cause unnecessary re-renders and lead to state inconsistencies.
React uses keys to optimize list rendering. Missing keys cause unnecessary re-renders and can lead to state inconsistencies.
Side-by-side examples engineers can pattern-match during review.
function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li> <!-- 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}> <!-- Compliant: id will always be the same even if 'posts' order changes -->
{post.title}
</li>
)}
</ul>
);
}function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li> <!-- 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}> <!-- Compliant: id will always be the same even if 'posts' order changes -->
{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.