Practice
Keys should be stable, predictable and unique so that React can keep track of elements.
In the code snippet below, each element's key will be based on ordering, rather than tied to the data being represented. This limits the optimisations that React can perform.
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
If you use the element data for a unique key, assuming that todo.id is unique to this list and stable, React will be able to reorder elements without needing to re-evaluate them.
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}
Comments