Each child in a list should have a unique "key" prop. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

You can read about this in official documentation here.

Table of contents

1. Rendering Lists in React
2. What happens if we do not specify key property in a list ?
3. How to generate the keys
4. Interview questions about React Keys
5. Asking interview questions around React State.

Rendering Lists in React

Lists are a well known thing in HTML. Everyone has used lists some time in their life.

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

But in React when we deal with react, we are not refering to the markup but rather how a markup is rendered. For example we might render a list as list of divs.

  function MyComponent(){
    const list = [1,2,3];
    return <>{list.map(item=><div>{item}</div>)}<>
  }

The above code is a static list and simple. But in reality lists are often dynamic and maintained as state.

  function MyComponent(){
    const [list, setList] = useState([1,2,3,4]);
    return <>{list.map(item=><div>{item}</div>)}<>
  }

In this code however the list may change and everytime it changes the entire list needs to be rendered again. This would be very problematic hence react likes to update only those items in the list that changed and maintains an internal mapping between the list data structure and the rendered elements.

To do this it need some unique identifier for the items in the list. This is often represented as "key"

  function MyComponent(){
    const [list, setList] = useState([1,2,3,4]);
    return <>{list.map(item=><div key={item}>{item}</div>)}<>
  }

What happens if we do not specify key property in a list ?

Imagine that files on your desktop didn’t have names. Instead, you’d refer to them by their order — the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. Read up official react documentation.

But if the key is not specified then react can not map the array items to the components, it by default relies on array index to do this. But if your array gets changed through sorting, this will mess up the entire list.

How to generate the keys

Ideally key property of the component should map to some unique attribute of the data it is representing. If it does not then you can generate a random ID for the data as unique property using libraries like UUID.

However never generate a random number on the fly because it will force React to rerender the elements every time the number is generated.

For example never do the following:

  function MyComponent(){
    const [list, setList] = useState([1,2,3,4]);
    return <>{list.map(item=><div key={Math.random()}>{item}</div>)}<>
  }

Interview questions about React Keys

This is easily the most common react interview question that gets asked and since it gets asked everyone knows the official answer. But it is important to show that besides knowing the official answer you understand the concept well. Always answer it in your own words.

For example:

Asking interview questions around React State.

If you are conducting react interviews I recommend reading our other post that gives you more detailed guide.

I do recommend asking each candidate a bit about react keys. You can either ask them directly or via going through their code.

One good way to ask if the candidate truly understand it is by asking the candidate:

• What happens if we do not use key at all ?
• What happens if we use a different property of data as key ?
• What if there is not unique property for the data ? What will you do ?