Consider providing a default key for dynamic children

Because many times performance is not an issue, I find myself doing things like this:

React.DOM.ul(null, items.map(function(item) {
  return React.DOM.li({key: Math.random()}, item.property)
})

Would make sense to have something like this by default?

[zpao]

I understand where you’re coming from, but please don’t ever do what you have there. We made this mistake in one of our examples for a while and it’s just really bad. By doing this, you’ll actually end up recreating all of your nodes on every render because the key will be different. While it might not hurt you today, it will one day.

A couple other points:

• key is not really about performance, it’s more about identity (which in turn leads to better performance). randomly assigned and changing values are not identity
• We can’t realistically provide keys without knowing how your data is modeled. I would suggest maybe using some sort of hashing function if you don’t have ids
• We already have internal keys when we use arrays, but they are the index in the array. When you insert a new element, those keys are wrong.

Now that said, they key warning can be pretty annoying. If it’s driving people to end up with solutions like you have here, then we should probably spend some time thinking of a better way to do this.

tl;dr: “no”

[sophiebits]

I agree a random key is the worst key one can use, but it’s still better than no key at all.

If no keys are provided, React uses the index in the array which is almost always better than a random key.