React Keys


1.Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

2.The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Most often you should use IDs from your data as keys:

const items = ['java', '.NET', 'JS', 'React', 'Angular'];   
const myList = items.map((item)=>{   
    return <li key = {item.id} >{item}</li>;   
});


3.If there are no stable IDs for rendered items, you can assign the item index as a key to the lists.

It can be shown in the below example:

const items = ['java', '.NET', 'JS', 'React', 'Angular'];   
const myList = items.map((item,index)=>{   
    return <li key = {index} >{item}</li>;   
});

_________________________________________________________________________________________________

Note:
It is not recommended to use indexes for keys if the order of the item may change in the future. This can negatively impact performance and may cause issues with the component state.