React Keys

We will see what React Keys are, their working, best practices with them, and the use cases that can occur in real life.

What are React Keys?

The React Key is an attribute that must be put in React Components when used in a list. For example:

Thanks to key attributes, React can recognise each item regarding their siblings on the list.

React snaps the before and after item when a re-render is taken. It can happen in various cases:

• If React sees the same key before and after rendering, it assumes the item component is the same and keeps the same component instance, only re-rendering it.

• If a key before re-render goes away after re-render, React unmounts the item component.

• If a new key shows up, React mounts the new item component.

What happens if we put random keys?

The case will be as follows:

When React renders the list, the item components will have random keys at first. Then, when a re-render happens, each Item component will have another random key different from the previous ones.

What implies this?

React unmounts all item components and mounts new elements in each re-render. Therefore, re-rendering React component instances are much more efficient than unmounting and mounting. In most cases, we must avoid using random keys for this reason.

What happens if I don't add any keys?

The case will be as follows:

For React is the same as if we put the index of the array as keys:

Therefore, we can examine the following case deeply.

What happens if I put the array index as the key?

We can have various cases:

• If we have a static list, it means a list with a fixed size and without future order changes. In this case, we can use the key without issues, and performance will be good.

• Suppose we have a list where we can make order changes or add items in random places. When we change the order of the list after re-render, the first item component will have the same key=0 as before, but things can be different. Then, it will render all items, regardless of whether each one has been memoized. For example, if the entity had a specific state before re-render, the item component after re-render will inherit the state of the previous item, when in this case will have to have a default state.

What happens if I add unique ids?

With this case, we can resolve the issues of the previous point. When we have a list of items, and then one is added, for example, in the first position, the things only re-render and is created a new item. The state of the previous components keeps the same, and the new item component will have its first default state from the beginning.

For the set unique ids, we should use the specific field of the item to set it. For example:

Is it better index keys than unique id keys in any case?

The answer is yes. When we have lists that can change contents and are stateless (not dependent on internal states), using index keys instead of unique ids is helpful. If you put unique ids, when items change, React unmounts previous item components and mounts new ones. On the other side, with index keys, React will use the same item components instances and will re-render them. Re-render is always better for performance than the flow of unmounting and then mounting new components. For example, we can see a good use case in paginated lists with a fixed size.

Conclusion

In conclusion, when this knowledge, you can apply the correct key in each specific case. For most issues, you must use the unique id key, but we have seen that it can be helpful in some cases, as the use index key is for the best performance.

---

I hope you enjoyed the article.

Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.

Here, I share a helpful article by Nadia Makarevich that also talk about this topic. I strongly recommend it:

https://www.developerway.com/posts/react-key-attribute

If you have any questions, feel free to contact me on LinkedIn, Edi Rodriguez, or leave a comment in the post.

See you in the next post.

Have a great day!