Using index as key for React Components?

Question

I'm rendering a list in my react app where:

Only new elements will be appended to the end of the list.
Every time an element is removed, it will only be the last element.

Given these conditions as well as not having the intention to reorder elements in any way. Can I use the index as the key prop without having any problem?

Whilst you can the only considerations you might take into account are 1. Are you working on a team that may ignore or not be aware of your conditions and 2. that you're likely to never change the functionality at a later day. — Emile
– Emile, Commented Jun 17, 2020 at 12:09

Daniel González Fernández · Accepted Answer · 2020-06-14 00:16:14Z

1

Yes, it is!

You can read what React docs says in here: https://reactjs.org/docs/lists-and-keys.html#keys

The main is this: We don’t recommend using indexes for keys if the order of items may change. T

You can also check this article: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

According to it, if you meet this conditions:

the list and items are static – they are not computed and do not change;
the items in the list have no ids
the list is never reordered or filtered.

You should be good to go.

edited Jun 14, 2020 at 0:16

answered Jun 13, 2020 at 19:01

Daniel González Fernández

3522 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using index as key for React Components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related