Rendering Lists. React Keys.
Today, I'm going to talk about the importance of adding keys to list items in React when you want to render them. What happens if it's not properly done, and how to do it correctly.
If you don't do it correctly, you can have weird behaviors in your app and performance problems.
I have seen in some React projects that some developers do not have this clear knowledge, and bugs and performance issues occur in applications due to this.
Avoid rendering list issues in React. Keys for the win.
Here are 3 important cases to deal with to fully understand how list rendering works in React and the importance of keys.
1. Static list
2. Dynamic list (you can change the order of the items or add new ones)
3. Dynamic list using React.memo for item components
Let's see them!
Static list
If you have a static list, where the elements will not be moved or added and deleted, you can easily use the index of each element of the array as a key. It's what React already does by default if you don't add it:
Problems can occur with dynamic lists in the following 2 cases.
Dynamic list
If you have a list using the array index as key and the elements are moved:
Initial list
[
{ id: “1”, name: “Item 1” },
{ id: “2”, name: “Item 2” }
]
Final list
[
{ id: “2”, name: “Item 2” },
{ id: “1”, name: “Item 1” }
]
React will see that the first component in the list (key=0) will have changed its prop to "Item 2". It will keep the same component and will re-render, changing that prop. The internal states of the component will be preserved to those that the component with the name "Item 1" had. This is not what we want! We want to maintain the proper state of each of the components when we order.
The re-renders of the components will always be produced. That is, every time the parent component is rendered, the children will be rendered.
How to solve it?
Add a unique key to each item. In this case, you have the unique id. This way, React will exactly recognize the elements by their unique key:
If you reorder the items, each component will maintain its internal state correctly.
Dynamic list using React.memo for item components
Whenever the parent component (DynamicList) re-renders, all components in the list are re-rendered whether or not their props have changed. You can prevent item components re-rendering if they haven't changed their props by using React.memo.
If you use the index as keys:
If you change the order of the elements, you have that the first component of the list will keep the key=0. But it will have a different name prop and re-render, ignoring the React.Memo! In this case, React.memo will be useless.
Instead, like this:
React will not re-render any of the elements when the order changes because they will detect that they are the same, thanks to the unique keys.
The components would not be re-rendered since they keep the same properties because you use React.memo.
Conclusion
If you're rendering static lists, it doesn't matter that you use the index of the array as keys.
However, if the list items can change the order or add new items, you must add unique keys associated with each item. In this way, you will prevent the internal states of each component from being lost and avoid unnecessary re-rendering.
Here, I share a helpful resource that also talks about this topic. I strongly recommend it:
It’s a book about advanced React by Nadia Makarevich, she deeps dive into these topics.
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.
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!