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
function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li>
{post.title}
</li>
)}
</ul>
);
}
Compliant Solution
function Blog(props) {
return (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
}
See
