React Error – Each child in a list should have a unique “key” prop

React throws error, each child in a list should have a unique “key” prop when you do not provide key prop in the list item. Let’s understand what this is and why it is required.

What is a key prop?

When we create a list using map or forEach function, we ask react to render a collection of JSX. This list could be html list of ul and li or it can be any kind of JSX. Generally, list items are of similar structure but different data. React expect us to provide a unique key to each item of the list. We use key prop for that. Its syntax is –

someArray.map(item => {
  return <div key={'uniqueValue'}></div>
})

Why is it required?

According to React manual –

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

There are many operations on websites which are costly in terms of performance. One of these are DOM manipulation. React is fast because it tries to manipulate DOM only when it is necessary. So, if there is a new element to be shown on webpage then React tries not to re-render everything but just the new element.

But why React asks for keys only on list?

Because generally list items are huge in number. Another reason is that when you add or remove items from the list, it is best to render only that item on the DOM and others remain as they were. This can only be possible when React knows what is added and where. Let’s understand this with examples –

Suppose, you have a list –

<ul>
  <li>Captain America</li>
  <li>Ironman</li>
</ul>

React will render this list. Now we add one item at last index –

<ul>
  <li>Captain America</li>
  <li>Ironman</li>
  <li>Thor</li>
</ul>

Here, react will check the new list tree with the old one. It will compare the first list item of old subtree with new subtree – Captain America, which is unchanged. So, no DOM manipulation will be done.

Similarly, Ironman is not changed. But Thor is added so one DOM manipulation is needed for Thor.

But, if you add a list item at the beginning then it will unnecessarily re-render all 3 items.

<ul>
  <li>Thor</li>
  <li>Captain America</li>
  <li>Ironman</li>
</ul>

Here,

• Captain America will be matched against Thor,
• Ironman against Captain America and
• Thor against Ironman.

Nothing will match and hence everything will be re-rendered, even though the 2 items are same. If the list is small, this is not a problem but when it is large, you can visually see the performance lag.

To solve this issue, React asks the users to provide a unique key to all items rendered through loops like map() or forEach(). You may use anything as key as long as they are unique to each other and same for a list item.

So, instead of using the element to match each other, React will use keys to check if an element with that key exists on the DOM. For example –

<ul>
  <li key={'captain_america'}>Captain America</li>
  <li key={'ironman'}>Ironman</li>
</ul>

Now if you add Thor anywhere in the list, it will not affect the rendering of any other list item because react knows that 'captain_america' key existed in the previous render and so DOM already has the element.

But if you changed the element and didn’t update the key, then the change will not be reflected on DOM. For example –

<ul>
  <li key={'captain_america'}>Captain America - First Avenger</li>
  <li key={'ironman'}>Ironman</li>
</ul>

    Tweet this to help others

Dom will keep on showing Captain America and not Captain America - First Avenger. You need to change the key 'captain_america' to something else like 'captain_america_FA'.

Math.Random() is a bad choice for keys because although it remains unique among list items, it will also generate a new random number on every render which will force react to re-render all elements. So basically it will be useless.

Some good keys to use

• A primary key id provided by database.
• Hash of item’s value.

We should try not to use array indexes as keys because they are not stable. When you add an item to array, other items will change position and hence their keys will change. This will result in unexpected outcome.

Because of these reasons, React warns you about each child in a list should have a unique key props.