React Keys in react


Keys in react are used to identify a list of DOM elements from the same hierarchy internally.

So if you are iterating over an array to show a list of li elements, each of the li elements needs a unique identifier specified by the key property. This usually can be the id of your database item or the index of the array.


Using the array index as a key is generally not recommended when the array is going to change over time. From the React Docs:

As a last resort, you can pass item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.

A good example about this: