🎁 The Js-Craft Guide to React is now available with a 30% off discount!

What to use as keys in React instead of the index

We have seen in a previous post why using indexes as keys when rendering lists in React is not a good idea, and how it can lead to bugs.

Therefore the question: so then what should I put in the key prop if not the index?

As I could not find a simple answer for this one, I went and did some research and this is what I found.

What to use as keys in React instead of index?

Below are some options for setting the key value in React, while looping through a map(data, index) function:

  1. use the id field of the data. In most cases, we get data from an API request and we want to show that data in a list. Most likely the data that comes from the API is from a database, so it has an id field or something similar. We can use this field as the value for the key property:

    // fetch the items from an API  
    {items.map(item => (
    <li key={item.id}>
        {item.description}
    </li>
    ))}

    This is maybe the most straightforward option.

  2. generate the key with an external library. One other way is to use a 3rd party library such as uuid or something similar:

    npm install uuid --save

    And, now we can do:

    import { v4 as uuidv4 } from 'uuid'
    {items.map(item => (
    <li key={uuidv4()}>
        {item.description}
    </li>
    ))}

    A potential downside of this approach is that we may need to install extra libraries to our project.

  3. a mix of index and one unique property. If the data doesn't have a unique identifier, and can't generate one, we can combine the index from the map() with some unique property of the data:

    {items.map((item, index) => (
        <li key={`${index}-${item.someUniqueProperty}`}>
        {item.description}
    </li>
    ))}

The overall idea here is to decouple the index value from the key.

Do not use the useId() hook to generate keys

React 18 introduced the useId() hook. It can seem like a perfect candidate for the key property:

// ⛔️ don't use the useId hook for keys
import { useId } from 'react'

{items.map((item, index) => (
        <li key={useId()}>
        {item.description}
    </li>
))}

But, please note that useId() hook was introduced for accessibility attributes and was not intended for keys. This is from the official documentation:
What to use as keys in React instead of the index

Is it ever safe to use the indexes as keys in React?

Yes, there are some cases when we can use the index as key. For example when we won't do any manipulation of items. When we will not add, remove, or do something like letting users rearrange the order of the items.

However, using the index as part of the key should be the last resort, as it may lead to issues when the order of items changes or items are added or removed.

In conclusion, when setting keys in React, choose a unique identifier that remains consistent across renders. Prioritize unique identifiers such as an id from the data or you can use libraries such as uuid for a more robust solution. Also, remember it's important to note that hooks like useId() are not intended to not be used as keys.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.

10 Javascript AI projects with Langchain & React

Not sure what to build? Dive in with these Javascript AI projects! Learn how to build LLM powered apps using Langchain.js and React! Connect your apps to LLMs such as OpenAI, create agents, use vector databases, or setup AI context.


Leave a Reply

Your email address will not be published. Required fields are marked *

📘 The Guide to React Home Screencasts Best of Newsletter Search X

📘 - 10 Javascript AI projects with React and LangChain

Hi friend! Before you go, just wanted to let you know about the 10 Javascript AI projects ideas with React and LangChain FREE ebook.

One of the best ways to learn is by doing the work. Choose from these 10 project ideas and start working on topics such as:

  • How does LangChain work
  • Connecting to OpenAI LLM
  • Create AI Agents
  • Simple and Sequential Chains
  • Adding Memory (Chat Context)
  • Prompt Templates
  • Using OutputParsers and Tools for Agents
  • Work with Documents and more...

Keep building and see the new capabilities LLM models can add to your React app! Get all projects as an ebook right to your inbox!

X