Are keys necessary only on arrays in React?

Question

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?

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Emile Bergeron, Aug 11 '21 at 14:49
See https://reactjs.org/docs/reconciliation.html#recursing-on-children for detailed description how keys work and what happens if you don't use keys and change order of rendered elements dynamically. — Aitwar, Aug 11 '21 at 14:51
The other main use for keys (other than rendering arrays) is forcing a remount of a component (though that's not often necessary). — AKX, Aug 11 '21 at 14:52

score 0 · Answer 1 · answered Aug 11 '21 at 15:29

0

you need to define key prop when you are rendering an array else react will throw an error

answered Aug 11 '21 at 15:29

Abi abiram

1
1

score 0 · Answer 2 · answered Aug 11 '21 at 15:33

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.

Is it only applicable the li tag or anytime you loop an array and produce other things live div or form for example? All the examples are li... to ask it another way, is this an li concern or array.map/forEach concern? — gunslingor, Nov 01 '22 at 23:28

Are keys necessary only on arrays in React?

2 Answers2