← All posts
Julien Delange Thursday, January 5, 2023

React: ensure the key attribute is used in lists of elements

Share

AUTHOR

Julien Delange, Founder and CEO

Julien is the CEO of Codiga. Before starting Codiga, Julien was a software engineer at Twitter and Amazon Web Services.

Julien has a PhD in computer science from Universite Pierre et Marie Curie in Paris, France.

See all articles

What is the key attribute of React?

In React, the key attribute is used to uniquely identify elements in a list. When a list is rendered, React tracks the identity of each element, so that it can efficiently update the list if the elements change.

What happens when you do not specify the key element in an array of elements in React?

If you don't specify a key attribute for the elements in a list in React, React will use the array index as the key by default. This can work in many cases, but it can lead to problems if you reorder or filter the list, because React will think that the elements have changed, and it will unnecessarily re-render them.

For example, consider the following code:

const list = [<li>Item 1</li>, <li>Item 2</li>, <li>Item 3</li>];

return <ul>{list}</ul>;

In this case, React will render the list with the default keys:

<ul>
  <li key="0">Item 1</li>
  <li key="1">Item 2</li>
  <li key="2">Item 3</li>
</ul>

This will work fine as long as the list is never reordered or filtered. However, if you reorder or filter the list, React will think that the elements have changed, and it will unnecessarily re-render them.

For example, consider the following code:

const list = [<li>Item 3</li>, <li>Item 1</li>, <li>Item 2</li>];

return <ul>{list}</ul>;

In this case, React will render the list with the default keys:

<ul>
  <li key="0">Item 3</li>
  <li key="1">Item 1</li>
  <li key="2">Item 2</li>
</ul>

React will see that the keys are different from the previous render, and it will re-render the entire list. This can be inefficient and lead to unnecessary updates.

Why it's important to have the key attribute in HTML elements for React?

To avoid this problem, you should specify a key attribute for the elements in the list, so that React can use a stable identity to track each element. This will allow React to efficiently update the list if the elements change, without having to re-render the entire list.

How to ensure developers enforce inclusive guidelines for their JavaScript code?

Codiga provides the jsx-key rule that enforces the presence of the key element for lists. When you work with React, it will warn you when lists of elements do not use the key element and may trigger unnecessary renders.

View rule to check use of the key attribute

To use Codiga and its rules for React in your IDE:

  1. Download Codiga for your IDE
  2. Add a codiga.yml file at the root of your project with the content below (you will be using the jsx-react ruleset)

codiga.yml configure for checking React code

If you also want to check your code at each pull and push request, install Codiga on your repository as well:

The rule checks for function names as well as variable names. You can explore the rules and test them yourself by visiting the ruleset on the Codiga Hub.

Schedule a demo

Code analyzed in seconds with Codiga Automated Code Reviews.

Write code faster with the Codiga Coding Assistant.

Let's talk!