When you have an array of components you should specify a key like this:
Example 1:
const els = losElementos.map(el => <div key={el.id}>el.siPeroNo</div>)
That's to optimize the rendering process.
But how about a component like this?
Example 2:
function fixedList() => {
return (
<div>
<div>first item on a list</div>
<div>second one</div>
</div>
)
}
There are two siblings with no keys, does having a key there would make a differece? (imagine if there's a lot of them....)
What if one is a div and the other is a section, does having a key now makes a difference?
Example 3:
function fixedListWhoDoesSecs() => {
return (
<div>
<div>first item on a list</div>
<section>second one but the type is different</section>
</div>
)
}
What about this one?
Example 4:
function someComps() => {
return (
<>
<div>first item on a list</div>
<div>second one</div>
<LeCustomTomato />
<ChefsNoubleGoal stuff={yez} />
</>
)
}
Does having the empty tag changes anything?
To summarize in one question: are keys only useful when you generate a dynamic array of components?
you need to define key prop when you are rendering an array else react will throw an error
By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference.
For example, when adding an element at the end of the children, converting between these two trees works well:
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
If you implement it naively, inserting an element at the beginning has worse performance. In order to solve this issue, React supports a key attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a key to our inefficient example above can make the tree conversion efficient:
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
Now React knows that the element with key '2014' is the new one, and the elements with the keys '2015' and '2016' have just moved.