javascript - How unique should a React component Key be?

Question

This is a quick one: what is the scope in which the children keys have to be unique? Is this just the parent component or the whole app?

If the latter is true, does it mean react diff algorithm will preserve an element when its moved across parent components?

Answer 1

Unique within its siblings, so the level directly under its parent. The children of the parent component however can use the same key again, because finally, react will compose the complete key out of the key of the current component and all of its ancestors. The example below only contains auto-generated keys, but if you provide your own key, it will be used instead.

You can see the composed ID's in Chrome developer tools (tab Elements).