https://stackoverflow.com/a/33458370/564509

tl;dr: Provide a unique :key metadata value for each child in a lazy collection of children. The value should meaningfully identify a child.

thanks. It looks like in some examples, they're just using a forever-incrementing number in an atom as a cheap way to produce a unique id. This wouldn't really "meaningfully identify" a child though would it?

So, would doing this (incrementing numeric technique) make the warning go away, but suffer some performance hit for React?

Attaching a nonsensical key would result in strange absence of children updates. At least, that's my experience.

Using just (range) may be fine but only if the values end up in the children as well.

E.g. like in this React example:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

This is the relevant section from the React documentation that goes into detail on why using indices as keys may be a bad idea: https://reactjs.org/docs/lists-and-keys.html#keys

Thanks, that's definitely a helpful link.

One observation - this "key" information does not appear to make it out to the "actual DOM" (according to my web inspector), so I presume React only uses this internally, I guess in its shadow DOM.

I've done web SPAs for a long time, and we leak out all kinds of noise and attributes to the actual DOM. So I'm still adjusting to the Reagent/React way of things.

(adjusting in this case means: "ok, I added the key stuff, and the warnings stopped, but how come I don't see my key attributes in the domm OHHHHHHHH riiiiiiight React.....)

yeah, the React link explains the reasoning: when you have a dynamic list of items, in the worst case React has to re-render and re-commit the entire list.

by adding keys, if they’re meaningful, React can intelligently remove, add or update only the changed children when it re-renders the parent

which is why using the index of a collection isn’t a good idea: if you remove something from the middle, everyone’s key changes, so React has to re-render and re-commit them because it can’t tell if they’re new or old

Also, consider installing React Developer Tools addon for your browser. It will display much more information that more closely resembles what you send to the render function.

Great info, thank you both. In my case I do have a meaningful key in the form of a timestamp (inst). I gave the inst directly as the key. Is it ok to give "objects" like this from clojure, or is it better to explicitly give it a string? Or does it not matter? Does reagent just "toString" it? I can't imagine React would be able to do meaningful things with cljs objects that aren't strings. ..?

Ooh I just re-read you saying Reagent doesn't need to to explicitly create the string. But React doed operate on a string. Reagent does us the courtesy. I think I'm good.

Yeah, as long as the resulting string is not [object Object]. 😉

😋👍