React - The hidden function for keys
Tags: javascript, react, webdev, programming
Published: 2022-09-25 00:09:36

You know you should pass `keys` for lists so React doesn’t get mad at you right?

So you think: why not just `key` everything? Better yet… why not make it random?

---

## Keys!

Outside of lists that you map, you might think keys have no function, after all, most, if not all, tutorials only mention keys in the context of mapping a list right?

If you’re like me, you probably only `key` lists, maybe you forget sometimes, see the warning, and add the key. 

But some people go in the other direction and start using `key` everywhere! Sometimes using something random like `Math.random()` or `new Date().getTime()`.

You might think: “Weird, but okay…”, except no! it’s not okay and you might end up with a bug impossible to debug (unless you go down the hole of debugging the actual React code).

### Things to know about the keys

You can have the SAME key, as long as they are on different levels (even in the same component!)

```jsx
function ThisIsOk(){
  return (
    <div key="this is ok!">
      <AnyComponent key="this is ok!" />
      <div> {/* here wouldn't be ok */}
        <AnotherComponent key="this is ok!" />
      </div>
    </div>
  )
}
```

This happens because, well… trees!

If you see how React renders things, you know it's basically one big tree of components (also, that’s why you can’t have a component returning multiple components without a wrapper).

React picks all components and makes a list of them, and when you put a key on them, a few things will happen:

- React doesn’t need to “add a key to it” (or whatever it does internally)
- React will treat any component with that key as the same component!
- React will easily remove components if it doesn’t find the key again.

### Examples:

Here is a little sandbox, try to use the inputs… if you can.

[https://codesandbox.io/s/keys-example-ll5rxg?file=/src/App.js](https://codesandbox.io/s/keys-example-ll5rxg?file=/src/App.js)

{% codesandbox keys-example-ll5rxg %}

What’s happening there is that the components with something random are being destroyed on each render because every time the component needs to re-render it finds a different key. Be it directly or indirectly.

Then you have the ones without keys or with a static key. Also the one with the same key but on different levels.

Finally the weird one: two components with the same key but alternating which one is being rendered. Since it’s the same key, same place, you’re basically saying it’s the same component and the state persists!

### What does this mean?

You've probably encountered a bug where you couldn’t make a component reset no matter what, so you started using `useEffect` with some dependency to reset the state… well, you’re not alone!

But now… you know why and you also know that you just need to pass it a different key to reset the state… no `useEffect` needed!

You also know that you can render the same component in the same place and it retains the state it had. Although I’m not sure where to leverage this. Even that example… usually we would just bring whatever it needs to make the `if` works inside.

---

Cover Photo by [Samantha Lam](https://unsplash.com/@contradirony?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/keys?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)