Loading video player...
When you're learning React, you'll see
tons of examples where developers use
the array index as the key when
rendering lists. It looks clean, it's
simple, and it makes that warning go
away. But there is a reason this is
considered an antiattern. Let me show
you how to use index as a key, and more
importantly, why it can cause serious
problems in your application. Back in VS
Code, in the source folder, I'll create
a new file called name list. JSX export
a simple name list component that
renders a list of names. So export const
name list is equal to an arrow function.
We define an array of names Bruce
Clark, and Diana. We create a list of
names by mapping over the array. So
const name list is equal to names dot
map. We pass in a callback function and
for each name in the array we can return
an H2 tag that renders the name. Since
the function body is a oneliner we can
omit the return keyword. In the next
line for the JSX we will return a div
tag that renders name list.
import and use this name list component
in app.jsx.
import name list from dot /name list and
within the app component invoke it
save both the files check the browser
and you can see we are rendering the
list of names Bruce Clark and Diana
if we inspect the dev tools console we
can see that key warning in the console
each child in a list should have a
unique key prop now here's the thing in
our name list component we don't have
the nice ids like before like we did
with our product list. Names is just a
simple array of strings.
You might think let me just use the name
as the key. So on the H2 element key is
equal to name. Refresh. And this works
until you have duplicates. Let me add
Bruce again to the list. Now the key
isn't unique anymore and React is not
happy. Encountered two children with the
same key. Bruce keys should be unique so
that components maintain their identity
across updates. This is where the index
comes in. The map method gives us access
to a second parameter in the callback
function, the index. And we can use this
as the key. So instead of key is equal
to name, key is equal to index. And now
refresh and the warning disappears. If
you render the index
you can clearly see that it starts at
zero and increments for each item
giving us unique keys. Now, you might be
tempted to use an item's index as a key
all the time. In fact, that is what
React will use if you don't specify a
key at all. But the problem with using
index as a key is that the index
represents the position, not the item
itself. And that can lead to subtle and
confusing bugs when the order of the
items changes in the list. What better
way to show you the problems with using
the index as a key than by seeing it in
action. I've created a small to-do list
demo component inside our project that
highlights these issues. Now, don't
worry about the code itself. It uses a
few concepts we haven't covered yet. The
focus here is on the behavior you will
often see in real world React apps when
the index is used as a key. This
component is available on the GitHub
repo. So make sure to check it out. I
will now include this component in
amp.jsx.
So import to-do list from dot /todo list
and right at the top invoke it.
Check the browser and you'll see the
to-do list component. At the top, we
have four buttons. Add new item to
start, a new item to the end, sort by
earliest, and sort by latest. Below
that, a table showing the index, which
is the position ID, an input field for
each item, and a created timestamp. The
key part of the code is here in to the
list.jsx JSX. When we render the list of
to-dos, we're using the index as the
key. Now, watch what happens. First
I'll add a value of one to the first
items input. Then, I'll add a new item
to the end of the list. Everything works
perfectly. New row appears with index
one, ID 2. I can type two as a value.
And we see the new time stamp. Let's add
another to the end. add new item to the
end. Index increments. ID increments.
Let's type three. And the time stamp is
also correct. So far so good. But now I
will add a new item to the start of the
list. What should happen? The new item
should have index zero because it's at
the very top. ID is four because it is
auto incrementing. An empty input at the
top. And the latest time stamp. When I
click the button add new to start, the
new row has index zero which is correct.
ID4 which is also correct. New time
stamp which is the latest. So that is
correct. But the input has a value of
one. And if you look at the last item
which had three before is now empty.
Here's what's happening. React is
tracking items by their index position 0
1 and two. When you add to the
beginning, the newly added item pushes
everything down. So the index of the
items change. The new item has index
zero. The second has index one and so
on. Now when React is rendering the
updated list, it thinks it already has
elements with keys 0 1 and two and their
values are 1 2 3. What appears to be
different is the item with key is equal
to three at the end of the list. So
React will add a new item to the end
with an empty value. And this problem
gets worse with sorting. Let me refresh
and start over. I will add three items
with values 1 2 and three. One, new item
two. New item three. Each has a
different time stamp. Now when I sort by
earliest or latest, watch the timestamps
move, but the input values stay in the
same positions. Sort by latest, we can
see 39, 37, 21, but the values remain 1
2 and 3. Sort by earliest, 21, 37, 39
1, 2, and 3. The data is sorted
correctly, but the UI is completely
wrong because React is tracking by
position and not by item. This is why
index as a key is an antiattern. Now
that makes you wonder why do so many
developers still use it? Or is there
ever a case where it's actually safe to
use index as a key? Yes, only when all
these following conditions are true.
Your items don't have a unique ID. And
if they do, always use that instead. The
list is completely static, so you never
add or remove items. The list is never
reordered or filtered. Think of a
navigation menu. Those links probably
never change, never get reordered, never
get filtered. In that very specific
case, index might be okay as the key.
And here's a quick tip. If you ever see
weird behavior in your lists, like data
jumping between items, inputs losing
focus, or animations glitching, check
your keys first. Nine times out of 10
someone, used, index, as, a, key., All right,
that covers rendering lists in React.
Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com Index as Key Anti-Pattern in React 19