What are "key" props and what is the benefit of using them in arrays of elements?

A key is a special string attribute you should include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed.

Most often we use IDs from our data as keys:

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:

Note:

1. Using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state.
2. If you extract list item as separate component then apply keys on list component instead of li tag.
3. There will be a warning message in the console if the key prop is not present on list items.