Using Indexes as Key

Keys should be stable, predictable, and unique so that React can keep track of elements.

The bad way

In this snippet each element's key will be based on ordering, rather than tied to the data that is being represented. This limits the optimizations that React can do.

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

The good way

Assuming todo.id is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.

{todos.map((todo) =>
  <Todo {...todo}
    key={todo.id} />
)}

Related Links:

• Index as a key is an anti-pattern

• Lists and Keys

• React docs

• Lin Clark's code cartoon

• ReactJS : What is the best way to give keys in array element