A key is a special string attribute you need to include when creating lists of elements because keys help React identify which items have changed, added, or removed.

Keys should be given to the elements to give them a stable identity.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often, you would use IDs from your 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.

Bad Practice

// Missing key for component
[<Hello />, <Hello />, <Hello />];

// Missing key for each element data
data.map(x => <Hello>{x}</Hello>);

// Invalid Syntax: `key` attribute before spread
<span key={"key-after-spread"} {...spread} />;

// Missing `key` attribute
data.map(x => <>{x}</>);

Recommended

// Updated component with key
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];

// Updated component with key for array `data`
data.map((x, i) => <Hello key={i}>{x}</Hello>);

// `key` attribute after spread
<span {...spread} key={"key-after-spread"} />;

// Updated `key` attribute
data.map(x => <key="key">{x}</>);