React Key - Not Only In map
Tags: react, webdev, javascript, typescript
Published: 2022-09-27 15:47:03

## [Skip to the unique use cases of `key` 🦅](#unique-use-cases-of-the-raw-key-endraw-prop)

## What is the `key` prop? 🗝

The key prop is all about optimization.
Setting key will inform React of which specific items have changed and need to be re-rendered. This is important for performance reasons, as React will only re-render the items that have changed, instead of the entire list.

1. `key` is used to identify which items <u>have changed, are added, or are removed</u>.

1. `key` only makes sense in the context of the surrounding array.

1. `key` is a `string` or `number`. The best way to pick a key is to use a `string` that uniquely identifies a list item among its siblings. <u>Most often you would use IDs from your data as keys</u>. 

1. `key` is passed **through** a component to React's `Virtual DOM`, and it can't be destructed from `props` to access its value.

---

## Unique use cases of the `key` prop 

### ◈ Avoid UI flicker

{% embed https://codesandbox.io/embed/practical-moon-ih5jnd?fontsize=14&hidenavigation=1&theme=dark %}

#### UI flicker - With a key

![UI flicker - With a key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg8yeyf7tdi6j7rmixom.gif)

#### UI flicker - Without a key

![UI flicker - Without a key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oa3pc8c3khmqjl9e94z.gif)

The difference is subtle but we can see that the blue background lingers for a bit after pressing the first button (which changes the children of the `Stack` component).

It happens because we're using a `React.Fragment` to wrap the children. If we were to use a div or some other wrapping tag, then we won't see the flicker.

> **So why not just do that instead you ask?**
By wrapping with a `div`, for example, we will only have one child and the `gap="20px"` prop won't apply.
In this case, it is a styling preference to wrap it with `React.Fragment`.

---

### ◈ Mount a new component instance (by @davidkpiano)

{% embed https://codesandbox.io/embed/using-keys-for-mounting-new-components-pmt91l?fontsize=14&hidenavigation=1&theme=dark %}

Rather than an `onChange` event, we <u>couple</u> the state to the `input` using the `key` prop.
With every state change, we mount a new component instance of the `input`.

> try commenting-out the `key` prop and see that the `input`'s value doesn't change. 


---

### ◈ Manually add `key` to every `React Node` in an array

{% embed https://codesandbox.io/embed/elegant-payne-97s0ct?fontsize=14&hidenavigation=1&theme=dark %}

Although it is not that unique, it can easily be ignored since there is no map here.
When passing a prop that is an array of react nodes (react components) we need to add a unique `key` to each node.

```js
<Main actions={[<PlusChar key="plus-char" />, <MinusChar key="minus-char" />]} />
```

If we won't pass the keys, we'll get the usual warning:
![Key warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t2l8ph93samz2emupv7.png)

And, on top of that, we won't enjoy the optimization the `key` provides us.


![Everybody gets a key meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfu494ulpo5i3ahzjyxg.jpeg)

## Conclusion:

The lack of a `key` can cause more than just a warning.
It can cause a UI flicker, or forcefully mount a new component instance.