Why does React need keys?

Published on
Dale Larroder-
2 min read

Overview

Why does React need keys?

The key prop is the only thing React can use to identify components in the DOM when they are mapped from an array. If no key is provided then you will see an error like this:

Missing “key” prop for element in iterator

In that case, React will default to use the index of the element in the array as the key. Usually, developers will also provide index as the key just to remove the warning.

Using the index as a key is dangerous

Please do NOT do this:

todos.map((todo, index) => (
    <Todo {...todo} key={index} />
  ));
}

It is stated in the official React docs that this is not recommended.

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.

Robin Pokorny has an amazing article explaining in detail the negative impacts of using an index as a key.

Rules of keys

  • Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.

  • Keys must not change or that defeats their purpose! Don’t generate them while rendering.

Where to get your key

  • Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.

  • Locally generated data: If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, crypto.randomUUID() or a package like uuid when creating items.

// id must be from db, which are unique by nature.
const todos = [
  {
    id: 22,
    name: 'eat breakfast',
  },
  // ....
]

// Much better
todos.map((todo) => <Todo {...todo} key={todo.id} />)

Conclusion

  • Always try to use stable unique IDs as the key.
  • If the list is never reordered or filtered, you can use their index as keys. (As a last resort)
  • If you're a visual learner, Dan Abramov has a short visual explanation on why React needs keys, check it out!