rspec/rules/S6477/javascript/rule.adoc

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>
  );
}
----

== See

* https://reactjs.org/docs/reconciliation.html#recursing-on-children[Recursing On Children] - React API reference
* S6479
* S6486