When i define a list or rows of data, we have notting/ not using anything that separates each row for other. In React each data within this list/row that we're creating. are equal values and there's nothing that's using to identify or uniquely identify each data row.

 

What to do?

While rendering each item in list or row data in rows, we add a unique key (a special string attribute) with each row. Key recycle DOM elements to optimise React rendering. 

Keys help React figure out which things in a list have been changed, added to, or taken away, which speeds up the rendering process. Keys should only work once and stay the same.

 

Why keys are so important —

•  When reacting, keys are useful for determining which components were modified or deleted.
• In order to give each element in an array a distinct identity, keys should be assigned to them.
• In the absence of keys, React is unable to recognise the uniqueness or order of any element.
• React can tell which elements were modified, removed, or added thanks to keys.
• The most common use case for keys is to display an API data list.

 

 

Now react knows that  this key is going to have the unique identifier and it's going to make sure that each to do row item that's compiled has separate keys. Now there is no 2 user, that can have the same numbers. help while deleting a user from list.