Why do I need Keys in React Lists?

Image for post
Image for post

React List and Keys

Because performance is an important aspect, when you are using lists you need to make sure they are designed for optimal performance.

Did you know that in React, when you use lists, each list item needs a unique key? Let’s learn more about lists and keys in React, and how to implement it the right way.

Rendering a simple List component

function ListComponent(props) {
const listItems = myList.map((item) =>
<li>{item}</li>
);
return (
<ul>{listItems}</ul>
);
}
const myList = ["apple", "orange", "strawberry", "blueberry", "avocado"];
ReactDOM.render(
<ListComponent myList={myList} />,
document.getElementById('root')
);

The code above shows a ListComponent that renders a list of items that are passed to it as props. In the render() method we have invoked the ListComponent and passed to it a list myList as the props. This code will generate the following output:

  • apple
  • orange
  • strawberry
  • avocado

But when you run this code, you will notice that React also throws a warning.

“Warning: Each child in an array or iterator should have a unique ‘key’ prop.%s%s See https://fb.me/react-warning-keys for more information.%s”

Notice here that the warning is about using a unique key. Keys are necessary to improve performance of your React app, and we will see how.

How do you use Keys in Lists?

To better understand this, let’s refactor the code snippet we saw earlier, to now include keys.

function ListComponent(props) {
const listItems = myList.map((item) =>
<li key={item.id}>
{item.value}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const myList = [{id: 'a', value: 'apple'},
{id: 'b', value: 'orange'},
{id: 'c', value: 'strawberry'},
{id: 'd', value: 'blueberry'},
{id: 'e', value: 'avocado'}];
ReactDOM.render(
<ListComponent myList={myList} />,
document.getElementById('root')
);

In the code snippet above you can notice that I have included a key to each list item. Observe, that I have updated my original list to be a value-id pair. Each item in the array has an id associated with it. Hence, this is the id that is assigned as a key for each item. This is the best approach to assign unique keys for items on a list.

In this method, the key is a unique string that identifies each item.

Can I just use indexes as keys? — Only under some exceptions

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);

In the example above you can see we are looping through the todos and assigning the index of each item as the the key. This is acceptable for some use cases that we will see below.

Reordering a list, or adding and removing items from a list can cause issues with the component state, when indexes are used as keys. If the key is an index, reordering an item changes it. Hence, the component state can get mixed up and may use the old key for a different component instance.

Therefore, avoid this practice, and make sure unique ids are generated to be assigned as key.

There are some situations when assigning the index as a key maybe acceptable.

What are some exceptions where it is safe to use index as key?

  1. The list will never be re-ordered.
  2. The list will not be filtered (adding/removing items from the list).
  3. There are no ids for the items in the list.

If all these exceptions qualify, then you can use an index as a key.

Note: Using index as a key can lead to potential unexpected behaviour within the component.

Keys need to be Unique, but only among its siblings

Keys don’t automatically get passed as a prop to the component

const content = items.map((item) =>
<MyComponent
key={item.id}
id={item.id}
title={item.title} />
);

In this example the MyComponent can read props.id and prop.title but not props.key.

Conclusion

  1. Lists are performant heavy and need to be used carefully.
  2. Make sure every item in the list has a unique key.
  3. It is prefered to not use indexes as a key unless you know for sure that the list is a static list (no additions/re-ordering/removal to the list).
  4. Never use unstable keys like Math.random() to generate a key.
  5. React will run into performance degradation and unexpected behaviour if unstable keys are used.

If you enjoyed this post, please share it and you can follow me on Twitter @AdhithiRavi

This article was originally published on https://programmingwithmosh.com/react/why-do-i-need-keys-in-react-lists/

Written by

Software Consultant, Author, Speaker, React Native|React|GraphQL Dev & Indian Classical Musician http://adhithiravichandran.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store