What's the point of fragment?

[inwardmovement]

I don't understand fragments as the output is the same with or without wrapping in <>...</>. Can you tell me?

This:

<ul>
  {items.map((item) => (
    <>
      <li>Red {item}</li>
      <li>Blue {item}</li>
      <li>Green {item}</li>
    </>
  ))}
</ul>

Or this:

<ul>
  {items.map((item) => (
    <li>Red {item}</li>
    <li>Blue {item}</li>
    <li>Green {item}</li>
  ))}
</ul>

Both outputs to:

<ul>
  <li>Red Dog</li>
  <li>Blue Dog</li>
  <li>Green Dog</li>
  <li>Red Cat</li>
  <li>Blue Cat</li>
  <li>Green Cat</li>
  <li>Red Platypus</li>
  <li>Blue Platypus</li>
  <li>Green Platypus</li>
</ul>

[delucis]

One useful thing is that you can set:html on a fragment:

<Fragment set:html={htmlString} />

You can also do that on an HTML element, but fragment lets you inject just the HTML with no wrapper element.

Anyone else have any favourite uses?

[inwardmovement]

Thanks for the tip!
So maybe we should not use "must" in "you must wrap these multiple elements inside of a Fragment", right?
And instead provide some tips fragments are useful for.

[delucis]

Maybe! Sounds related to #369