Index as a key is an anti-pattern

So many times I have seen developers use the index of an item as its key when they render a list.

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

It looks elegant and it does get rid of the warning (which was the ‘real’ issue, right?). What is the danger here?

It may break your application and display wrong data!

Let me explain, a key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If…