The Importance of Using Unique Keys in React

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.

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

• Functional components
• State vs Props