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?

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…

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robin Pokorny

Zealous Engineer — TypeScript & Tech Leadership — Speaks — Loves maths — Reads specs — Vzhurudolu.cz podcast — Lives in Berlin