React - The hidden function for keys

You know you should pass keys for lists so React doesnt 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 youre 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! its 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!)

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, thats why you cant 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 doesnt 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 doesnt 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

Whats 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 its the same key, same place, youre basically saying its the same component and the state persists!

What does this mean?

You've probably encountered a bug where you couldnt make a component reset no matter what, so you started using useEffect with some dependency to reset the state well, youre 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 Im 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 on Unsplash