Reiterating why you should never use Array ‘index’ as ‘key’ in your React Applications
I know you might have heard about passing mandatory key prop in your iterators a lot before, but let's look at it again with an example of a super weird bug 🐞 I found in my code recently.
Imagine you are writing your React code to render a list of items using Array.prototye.map that returns a list of components. If you are working in a Repo with proper eslint setup then you might have got a warning related to react/jsx-key , which means key prop is missing inside your iterator. If you are aware of the rule react/no-array-index-key then you will probably set a unique value to your key prop, else you end up putting the arrayindex as the key prop without understanding the consequences.
Let's look at an example of these two approaches(Using array index and unique id) and reproduce the weird bug that I faced in my code last week. Below is a React codesandbox with the sample of two tables. Both the table components are exactly the same with the same data. The only difference being one table is rendered with array index as key and the other one with a unique id. Additionally, a user can also delete a product row from the table.
Let's try to delete a row in the first table. As soon as you click on theDelete button, the text changes to Deleting... , and the row gets deleted after 3 seconds. However, the button in the next row gets updated toDeleting... , which is weird because we didn’t update it.
However, if you do the same action on the second table, it works perfectly. The only difference between these two tables is the first table rows are rendered with key prop as the index of the products list and the second table rows are rendered with key prop as the id of the product from the products list.
Did we fix the bug?
It was weird at first as we were unable to figure out the root cause of the issue. We were thinking of fixing it with a different set of approaches. But once we figured out the actual issue that the key is index by default, it was an easy fix. 🎉
Why didn’t my eslint catch this error?
Because, it is not from the code that we wrote. the issue was from a library I use, that sets the default key prop to the index in its iterable. 💭
Apart from this, there are other benefits such as performance optimization if data keeps changing after it is rendered. Keys help React identify which items have changed, are added, or are removed. So it is highly recommended to use unique identifiers as a key prop inside an iterable.
To read more about keys , Click here. ⬅️
If your React project doesn’t have the eslint rules react/no-array-index-key ,react/jsx-key enabled, I would highly recommend you enable them right away to avoid any such related UI bugs in the future.
For more information on the other eslint rules that can make you a better developer. Read here.
Hope this was helpful.
📚 Resources:
- https://reactjs.org/docs/lists-and-keys.html#keys
- https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/
- https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md
- https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
- https://isantoshv.medium.com/eslint-rules-that-made-me-a-better-react-developer-7689f0cb443a
