Why is using the array index as a key in React not recommended

We all have heard that using index as key in a React list is an anti-pattern and should be avoided. The answer to this lies in the concepts of:

• React Virtual DOM: It's a lightweight representation of the actual DOM, stored in memory and is never rendered.
• Reconciliation in React: The process of syncing Virtual DOM with the real DOM.
• Diffing Algorithm: The algorithm to find the minimum number of steps needed to update the real DOM.

1. Two elements of different types will produce different trees.

2. The developer can hint at which child elements may be stable across different renders with a key attribute.

This is just a very brief overview of these concepts. For now, let's just keep in mind the second assumption used for React's diffing algorithm and proceed further.

React uses key attributes to track the changes in the list.

We might face the following issues when we use the index value as a key attribute when creating a list:

• Performance Issues due to unnecessary re-renders.

• Issues in data mapping in case list items are sorted, filtered, or deleted.

Let's understand the performance issue with the following example.

Suppose we've a list of elements, with key attributes as index.

Now, in case of any state change in the list, React just iterates over each list item in both the lists (React compares the Virtual DOM snapshot before the update and after the update), looks for changes, and finally updates the real DOM with only those changes.

If we add an item to the end of the list, React no longer needs to re-render the first three list items which are the same. It will just add a new list item at the end.

Now, the key of remaining list items also changes, which makes React re-render all the elements again, instead of just adding a new item at the end.

This can be avoided if we use some unique ID as a key rather than an index.

Let's again consider the same previous example but this time by using a unique ID as key.

Now even if we add elements to the beginning or the end, we won't face an issue since keys are different.

Since React tracks all list items with their key attribute, after adding a new element it would not re-render the previous list items.

On deleting an item from the first list, we can see the whole list is getting re-rendered, while in the second list the original list remains intact and only the targeted element is removed.

So, in case the list is large with complex components, it might cause a huge performance issue.

Always prefer using a unique ID as a value for the key attribute in a list and avoid using index. Using index might result in performance issues and data binding issues in case reordering in the form of sorting or filtering might happen.

  Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.