Why React Needs Keys, a short visual explanation.
Each render is like a frame in a movie. React doesn’t know *what* you did with your data. It only sees the JSX from the previous render and then from the next render.
circles.map(c => <Circle color={c.color} />)
Each render is like a frame in a movie. React doesn’t know *what* you did with your data. It only sees the JSX from the previous render and then from the next render.
circles.map(c => <Circle color={c.color} />)
Tell me what happened to circles. If you look close enough, you’ll realize there are two *different* possible interpretations of what happened!
1. Maybe second and third circles swapped positions…
2. Or maybe the second circle became blue and the first circle became yellow!
1. Maybe second and third circles swapped positions…
2. Or maybe the second circle became blue and the first circle became yellow!
Normally this wouldn’t matter. But imagine each circle has state inside. Like a checkbox or an input. Then the difference between “moving” and “changing” becomes significant! In the first case you *want* the state to move too. In the second case you don’t.
So what are keys? Keys are a hint you give to React so that it knows how to know which of the two cases it is.
circles.map(c => <Circle color={circle.id} />)
It’s a way to tell React “what makes two circles the *same* circle, even between renders”.
circles.map(c => <Circle color={circle.id} />)
It’s a way to tell React “what makes two circles the *same* circle, even between renders”.
React can’t make up a good key itself. Only *you* know how your data is structured and whether two circles in two renders are “the same” circle conceptually (even if all of its data changed) or not. Usually you’d use an ID generated during data creation. Such as from a database.
If you don’t specify a key in a list, React will fall back to using an index. And of course you could also pass index as a key yourself.
It’s not necessarily “wrong” or “slow” or anything like this. It’s just that you’re telling React “I promise the circles never change order.”
It’s not necessarily “wrong” or “slow” or anything like this. It’s just that you’re telling React “I promise the circles never change order.”
What happens if you pass a random key every time? Well, you’re telling React that circles are *never* the same between renders. So if you have some state inside of them, it will be lost after every re-render. React will destroy and recreate every circle because you told it to.
And that’s the principle behind keys! They’re not something that React can guess or automate for you because you’re the only person who knows whether you meant “these items were moved/inserted/removed” or “these items changed their content”. Nobody else knows that.
Why doesn’t React “guess” what happened from what I did to my array? First, from React’s perspective, your array is completely different every time—a new copy.
But even if React *did* track your changes it wouldn’t be enough! Refetching data would give you new arrays anyway.
But even if React *did* track your changes it wouldn’t be enough! Refetching data would give you new arrays anyway.
Keys are for more than just arrays. They specify a component’s identity — is this the “same” or “different” component between re-renders. You can use this to reset state:
<ChatThread key={contact.id} />
This makes switching the contact reset all text fields inside.
<ChatThread key={contact.id} />
This makes switching the contact reset all text fields inside.
In the long term, when React gets built-in deep support for Animations, keys will play a big role there too. Think about it: the difference between “moving/adding/deleting” and “updating” becomes obviously visual! If things animate in and out as you didn’t intend, the key is bad.
And that’s it for today 🙂 we’ll definitely add something along the lines of this explanation to the new docs.
*Correction this should’ve said
circles.map(c => <Circle color={c.color} key={c.id} />)
I haven’t fully woken up.
circles.map(c => <Circle color={c.color} key={c.id} />)
I haven’t fully woken up.
Correction to one of the tweets:
https://twitter.com/dan_abramov/status/1415324243580043274
• • •
Missing some Tweet in this thread? You can try to
force a refresh
