DEV Community

Santosh Viswanatham
Santosh Viswanatham

Posted on • Originally published at isantoshv.Medium on

Reiterating why you should never use Array ‘index’ as ‘key’ in your React Applications

reactjs
Photo by RealToughCandy.com

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.

https://medium.com/media/e99850d39052f87cf29026ef37e6449e/href

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:

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay