React - The hidden function for keys

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!)

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

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 on Unsplash