Understanding React keys

If you use React you need to understand keys.

Permalink to heading Key concept Key concept

In React, keys are the guiding beacon.

A react key is an attribute, you can add it like that:

  {myPosts.map(({ post }) => (
    <li key={post.slug}>
      <a href={post.url}>{post.title}</a>


Permalink to heading The classic warning The classic warning

Warning: Each child in an array or iterator should have a unique « key »

It’s easy to make that warning disappear but some solutions are not recommended.

Permalink to heading Bad solutions Bad solutions

The following approaches are pretty bad. I will explain why. Please do not use them.

Permalink to heading randomize randomize

Easy but counterproductive.

Look at the following (I’ve seen it before…):

<li key={randomize()}>... etc

randomize() is not smart at all! It will trigger a re-render every time.

This may lead to bad overall performances!

It’s an anti-pattern to React because of the very nature of its algorithm.

Permalink to heading Using indexes Using indexes

It’s not so rare to see this too. People like to use array indexes as keys, so 0,1,2,3,4…n, where n is the number of iterations :

  myData.map((data, index) => <MyComponent {...data} key={index} />)

It might work and it’s better than using randomize() but if you have complex structures like arrays of arrays, this will fail.

Permalink to heading What are the keys? What are the keys?

React use keys to detect changes. This way, it knows if something has been added, changed or deleted.

But why?

This way its actions on DOM are optimized.

Permalink to heading Good practices Good practices

Whenever the word « good practices » is pronounced you have to be wary but anyway, keys are identifiers.

Just look at the following :

  {myPosts.map(({ post }) => (
    <li key={post.id}>
      <a href={post.url}>{post.title}</a>

I’m using key={post.id}, I could use key={post.slug} too. The idea is to use something very unique and stable.

For example, e date with format Y-m-d would be stupid here.

Permalink to heading Why must the keys be stable and unique? Why must the keys be stable and unique?

React relies on a comparison algorithm. It compares 2 sets of keys. This way, it knows critical differences and it’s easier to create, update, or delete things.


That’s pretty much the reason why keys must be stable and unique. Without it, React would recreate everything all the time.

Permalink to heading No zeal please No zeal please

Some solutions are bad and some are useless. The following makes no sense:

render() {
    return (
        <MyComponent key="theGreatEscape" />

React does not care. It’s possible to use libraries to generate keys but please make sure they are static.

Permalink to heading Wrap up Wrap up

Yes you MUST fix the warning: « Warning: Each child in an array or iterator should have a unique key ». Otherwise, React will re-render everything all the time!

Learning keys is a nice way to get a deeper knowledge of React.

I do my best to update all my contents, but keep it mind that "Understanding React keys" has been published many months ago.

This content is available in other languages: