Index as a key is an anti-pattern
Robin Pokorny
41416

The problem with using shortid or any id generating library is that every render will cause each child with key={shortid.generate()} to get a unique key, thus defeating the purpose of having a key in the first place. Children of .map need to have consistent keys, otherwise the React reconciliation algorithm will assume they’ve changed in some way (when in reality only their key has) and unnecessarily re-render them. I’ve personally have never ran into an issue with using key={i}, but ironically I’ve had problems using key={shortid.generate()} (the unnecessary re-rendering problem as stated above). If for some reason key={i} was causing a problem, I would add a unique key prop to each child object being .map-ed; don’t want to install another dependency for something as fundamental as .map.

Show your support

Clapping shows how much you appreciated Michael Leung’s story.