I was just wondering while reading article from .

It has a simple fiddle code which says - If you dont have unique constant keys you might end up in

1. Recreating the DOM node of a ponent when the key is not constant
2. Reusing a DOM node to render another ponent when the key is not unique

Its quite confusing in below cased -

1. Why I give key = index (even though its unique and constant why react behaves weirdly?)
2. What exactly happens when the keys are unique but not constant (Does it check if key exist in DOM if not just remove it.)

I was just wondering while reading article from https://coderwall./p/jdybeq/the-importance-of-ponent-keys-in-react-js.

It has a simple fiddle code which says - If you dont have unique constant keys you might end up in

1. Recreating the DOM node of a ponent when the key is not constant
2. Reusing a DOM node to render another ponent when the key is not unique

Its quite confusing in below cased -

1. Why I give key = index (even though its unique and constant why react behaves weirdly?)
2. What exactly happens when the keys are unique but not constant (Does it check if key exist in DOM if not just remove it.)

• javascript
• reactjs

• It's not a good idea to use index as key, since they are not really constant -- if you delete an item, all items that follow it will change index. – Aaron Beall Commented Aug 11, 2016 at 21:07

2 Answers 2

Expanding on the @Deadfish answer. Let's say you have 10 todo items, and each item has state (e.g. whether it is in editing mode).

On the next render pass, there are only 9 todo items left. E.g. because you deleted one of the items.

Now react needs to know which of the original 10 items are still left, so it can preserve the state of each item, and re-render only items that changed state.

That is what react uses the key for. If you use the index as the key, then the original keys were 0..9. And the new keys are 0..8.

This can cause several problems:

1. React will ALWAYS conclude that you deleted the last item in the list, which is not necessarily correct. There are other posts on SO about this, e.g this one
2. React will ALWAYS conclude that the items did not change order, so react will think that any state of original item no 5 will still be state of item no 5. But if you deleted eg. item no. 3, then all items should have moved up in the list. which is what the other answer pointed out.
3. If the items in the list do not have any state (only props) - e.g. the title of your todo - then your rendering will bee very inefficient. If you delete the first item, then react will conclude that ALL items now have a new text, and will re-render ALL remaining items (instead of efficiently deleting just the first item from the DOM).

Using unique and constant keys - so not just unique in a single render run, but especially constant over multiple render-cycles - will ensure that everything works as intended, and will ensure react updates DOM efficiently.

It is always good to have react keys constant and unique. There will be times when index will not work well.

Let us consider a scenario where we have two ponents TodoList and TodoItem in our application. The TodoList ponent iterates over a todos array and renders TodoItem for each todo. Let's say you have opened the second TodoItem for editing. So it's state says {editing: true} and it renders an input box instead of Label.

Now if you have used index as key, then upon deleting the second todo, the third todo will inherit state from the deleted todo and display an input box instead of Label. This happens since they both share same key.

I hope I made myself clear.