The Importance of Using Unique Keys in React
.JPG){kind=small}
If you have already worked with React elements, then you have probably already encountered the following error:
According to the official React documentation, a key attribute is an attribute that helps React identify which element has been changed, removed, or added when creating an entire list of items or an array of elements.
And that's what is crucial. Keys are essential for distinguishing a list item among elements of the same type within a list of elements. Elements from different lists can have duplicate keys.
But what will happen if we forget to specify keys? Or if we use the duplicate keys? Will our application break? And how will this affect its performance?
To answer these questions, let's look at what happens "under the hood" of React during the re-rendering of components.
.webp)
Re-rendering of React components
Simplified re-rendering looks like this:
1. First, React creates "snapshots" of elements before and after the changes.
2. Then, it attempts to identify elements that were already on the page to reuse them instead of recreating them:
- If there is a key attribute, React assumes that elements with the same keys are identical before and after the changes.
- If the 'key' attribute is absent, it uses the default adjacent element indexes as keys.
3. Then React:
- Removes elements that were present before but absent after (unmounts them).
- Creates from scratch elements that were not present before (mounts them).
- Updates elements present before and still exist after (re-renders them).
Thus, keys play a crucial role in the re-rendering of a component. Incorrectly specified keys can lead to errors.
Index as a Key
Many automatically use the index as a key. Let's see what happens if we do that:
When removing an element from the list, you may notice that the correct item is removed, but the counters behave unexpectedly. This happens because changing the order of elements changes the indexes, and React cannot correctly match the elements.
like this
Which keys to use?
React itself recommends using crypto.randomUUID() or uuid. Of course, if you have a small application, you can input your IDs to elements you can use as keys. For example:
Basic rules for using keys
Uniqueness: Keys must be unique within one list of elements
Stability: Keys should not change during re-rendering
Avoid using indexes: Indexes can lead to issues when the order of elements changes
Keys for top-level elements: Keys should be added only to top-level elements, not to nested components
These rules will help you avoid issues with keys and ensure the correct behavior of your component instances during re-rendering.
Related Hyperskill topics
Create a free account to access the full topic
