Display Name Display Name - 1 year ago 93
React JSX Question

The importance of component keys in React.js

I was just wondering while reading article from https://coderwall.com/p/jdybeq/the-importance-of-component-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 component when the key is not constant

  2. Reusing a DOM node to render another component 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.)

Answer Source

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 become 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.