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

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:

COPYconst 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:

COPY<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:

COPYconst 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:

COPY<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.

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

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

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

• GitHub
• GitLab
• Bitbucket

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.