error: Do not use Array index in keys

Question

I am using index to generate key in a list. However, es-lint generates an error for the same. React doc also states that using the item index as a key should be used as last

Answer 1

The issue with using key={index} happens whenever the list is modified. React doesn't understand which item was added/removed/reordered since index is given on each render based on the order of the items in the array. Although, usually it's rendered fine, there are still situations when it fails.

Here is my example that I came across while building a list with input tags. One list is rendered based on index, another one based on id. The issue with the first list occurs every time you type anything in the input and then remove the item. On re-render React still shows as if that item is still there. This is

Answer 2

Do not use array indexes as keys, this is an anti-pattern that is pointed out by the React team in their docs.

It's a problem for performance and for state management. The first case applies when you would append something to the top of a list. Consider an example:

<ul>
  <li>Element1</li>
  <li>Element2</li>
  <li>Element3</li>
</ul>

Now, let say you want to add new elements to the top/bottom of the list, then reorder or sort the list (or even worst - add something in the middle). All the index-based key strategy will collapse. The index will be different over a time, which is not the case if for each of these elements there would be a unique id.

CodePens:

• Using index as a key: https://reactjs.org/redirect-to-codepen/reconciliation/index-used-as-key
• Using ID as a key: https://reactjs.org/redirect-to-codepen/reconciliation/no-index-used-as-key

Play with it and you'll see that at some point the index-based key strategy is getting lost.

Answer 3

use the following lib "react-uuid" : https://www.npmjs.com/package/react-uuid.

react-uuid basically create random ids when you call it each time.

import React from 'react'
import uuid from 'react-uuid'

const array = ['one', 'two', 'three']

export const LineItem = item => <li key={uuid()}>{item}</li>

export const List = () => array.map(item => <LineItem item={item} />)

and this should solve the issue.

Answer 4

When you use index of an array as a key, React will optimize and not render as expected. What happens in such a scenario can be explained with an example.

Suppose the parent component gets an array of 10 items and renders 10 components based on the array. Suppose the 5th item is then removed from the array. On the next render the parent will receive an array of 9 items and so React will render 9 components. This will show up as the 10th component getting removed, instead of the 5th, because React has no way of differentiating between the items based on index.

Therefore always use a unique identifier as a key for components that are rendered from an array of items.

You can generate your own unique key by using any of the field of the child object that is unique as a key. Normal, any id field of the child object can be used if available.

Edit : You will only be able to see the behavior mentioned above happen if the components create and manage their own state, e.g. in uncontrolled textboxes, timers etc. E.g. React error when removing input component