Table of contents
Text Link
Text Link

The Importance of Using Unique Keys in React

If you have already worked with React elements, then you have probably already encountered the following error:

uniqre key prop 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. 

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.

Share this article
Get more articles
like this
Thank you! Your submission has been received!
Oops! Something went wrong.

Level up Frontend skills and advance your career

• Wide range of learning tracks for beginners and experienced developers

• Study at your own pace with your personal study plan

• Focus on practice and real-world experience

Learn Frontend Free
No credit card required

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:

const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
]

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

Get more articles like this
Thank you! Your submission has been received!
Oops! Something went wrong.

More on this