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.