Using object instance as a key in React list - reactjs

Question

I have a list of objects which I want to render as a list using React.
React requires the special key attribute on the list element in order to track changes between DOM and virtual DOM.
My object doesn't have any special unique properties like id, in fact, two objects could even have the same properties, but the object itself is unique.
Is there a way to use object's reference as a key to render React list?
Otherwise, what workarounds could be suggested in this case?
Also, I'm receiving the list of items from a third party, so I can't just attach a random ID to each item, because it will make the React to re-render all items each time I receive updated data.

Answer 1

If you don't have a unique ID (returned by the back-end, or you can't build a composite key on the front-end), then you can use the array index as key:
render() {
return array.map((item, index) => <Item key={index} />)
}
Without having an unique ID, whatever approach you choose, if the order of the items is changed, then the list can get totally messed up.
It would be safe enough to use this approach if your case met the following 3 conditions, thanks to this article:
the list and items are static–they are not computed and do not change.
the items in the list have no ids.
the list is never reordered or filtered.

Answer 2

Using array's index as a key would be a disaster, because if array changes, the view will not be properly updated or will be updated partially in an unpredictable manner.
The only solution I've found is to generate the dummy IDs as suggested in the comments.
The idea is to implement the generator, which will create an ID for each item, but at the same time will remember previously generated IDs.
The WeakMap JavaScript class will allow us to store the mapping information between the item object reference and generated ID:
export class IdGenerator {
// Using WeakMap as index
map = new WeakMap();
// Internal counter
lastId = 0;
getItemId(item) {
// Getting previously generated ID for the specified item
let id = this.map.get(item);
// If item is new, generating the ID and storing it for future use
if (undefined === id) {
id = ++(this.lastId);
this.map.set(item, id);
}
// Returning ID to the caller in either case
return id;
}
}
Then it could be used to assign generated IDs to each item before rendering the list:
class ListBox extends Component {
// Instantiating the generator
itemsIdGenerator = new IdGenerator();
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={this.itemsIdGenerator.getItemId(item)}>
{item.title}
</li>
))}
</ul>
);
}
}
Make sure to use different instance of the generator for each instance of the component though and create generator only once with the component.
Also, calling the generator for each item in component's render method could be sub-optimal. However, I didn't want to touch the original items or mutate them. If this is an issue, consider using various lifecycle methods provided by React to set IDs when props changes.