Why You Should Never, Ever Use Indices As React Keys

Unraveling the mystery of React keys… Here’s how to use them wisely, which means never using an item’s index as its React key.

Let’s Agree To Never Use Indices as React Keys 🔑

In React, the key prop is essential to maintaining the performance and stability of your React apps, though most of us learn about it for the first time from a console error message:

“Warning: Each child in an array or iterator should have a unique ‘key’ prop. Check the render method of …”

What the hell, React? Any time you have a list, you need a key??? Well, React uses keys to identify and track the order of elements in a list, helping to efficiently update and render the correct components when changes occur.

Using indices as React keys might seem like a quick and easy solution, but it can lead to unexpected consequences. Let’s explore why using indices as keys is a bad idea and what alternatives you should consider instead.

The Perils of Indices as Keys 🚫

Imagine a world of emojis, and you’re assigned to give each one its own, special, unique React component. Consider the following list:

const emojis = ['😀', '😃', '😄', '😁', '😆']

You might be tempted to use the index as the key when rendering the list of emojis. We’ve all seen code that looks like this at one point or another:

emojis.map((emoji, index) => <Emoji key={index} value={emoji} />)

However, this approach will lead to performance issues and unwanted side effects. When React encounters an array of elements with keys based on their indices, it assumes that the order of the elements is fixed. As a result, any changes to the list can trigger unnecessary re-renders and disrupt the application’s state when you use the item’s index as that item’s key in React.

Why Indices as Keys Cause Trouble 😵

Let’s dive deeper into the specific problems that can arise from using indices as keys.

1. Performance Issues: When you use indices as keys and insert an item at the beginning of the list, React will have to re-render every single item because the keys have changed. This can lead to performance bottlenecks in large lists, causing a slower user experience.
2. Incorrect Component State: If you use indices as keys and remove an item from the list, React may not properly update the component’s state. This can cause components to render incorrect data, leading to inconsistencies and bugs in your application.

To illustrate this point, let’s modify our emoji list:

const updatedEmojis = ['😊', '😀', '😃', '😄', '😁']

Imagine that our app has added a new emoji at the beginning and removed the last emoji. If we’re using the index as the key, React may not update the components correctly, leading to the wrong emojis being displayed.

The Solution: Unique Keys 🗝️

The best practice is to use unique keys that do not depend on the order of the elements in the list. One option is to use a unique identifier provided by your data source, such as an ID:

const emojisWithId = [
  { id: 1, value: '😀' },
  { id: 2, value: '😃' },
  { id: 3, value: '😄' },
  { id: 4, value: '😁' },
  { id: 5, value: '😆' },
]

Now, when rendering the list of emojis, use the unique ID as the key:

emojisWithId.map((emoji) => <Emoji key={emoji.id} value={emoji.value} />)

By using unique keys, React can properly track and update components even if the order of elements changes.

The difference from using the index is that each ID is now uniquely associated with each emoji, and importantly: the ID does not change.

This approach prevents performance issues and ensures correct component state, providing a stable and efficient user experience.

Conclusion: Let’s Not Use Indices as React Keys

Using indices as React keys might seem convenient, but it can lead to performance issues and incorrect component state.

Always use unique keys, such as IDs from your data source, to maintain a stable, efficient, and bug-free application.

In a pinch, you could use Math.random(), but this would also reduce performance since the keys would change each render.

Almost always there’s something unique about each item that you can use as a unique identifier. Maybe you can generate a uuid on the backend?

Because I guarantee you that you will be tempted to use index as a React key at a point in your career, and it will be hard to resist that temptation.

The problem is that if you reorder a list set up using index as a React key in any way, you’ll experience weird, inconsistent rendering bugs.

Happy coding! 🔑