Rule proposal: detect unnecessary use of fragments

[moretti]

The idea behind fragments is to group a list of children without adding extra nodes to the DOM.
Fragments are completely redundant when wrapping a single child, so the rule should detect examples like:

<>
  <div />
</>

<Fragment>
  <div />
</Fragment>

and flag them as a warning/error.

Example of valid usage of fragments:

<>
  <div />
  <div />
</>

(any case where children.length > 1)

[ljharb]

This is a good rule (altho until enzyme supports rendering non-nodes, a fragment with a non-node child is still necessary, so perhaps that should be controllable via a separate option).

Both forms - syntax and API - should be checked.

[pawelnvk]

I would love to work on this one! Could you elaborate more about both options? How would look like "non-node" child? Code snippet would be helpful.

[golopot]

Other cases:

1. Looks useless

const Foo = () => (
  <div>
    <>
      <div />
      <div />
    </>
  </div>
)

2. Looks useless, but arguable.

const Goo = () => (
  <div>
    <>
      <div />
      <div />
    </>
    <section />
  </div>
)

3. Not useless if it is a child of a non-dom component.

const Hoo = () => (
  <Moo>
    <>
      <div />
      <div />
    </>
  </Moo>
)

[ljharb]

I do think it’s always useless to pass a fragment as a child to an html element; the rule should warn on that too.

[golopot]

Here comes the problem of whether a tag is a html element, also noted in #1752 (comment). Maybe in this case it is ok to maintain a list of html tags in this repo, since in #1752 an omission of an html tag name is false positive, whereas in this rule, an omission is false negative.

[ljharb]

It’s an html element if the tag name is lowercase and doesn’t have a dot in it; that’s how jsx works - that comment is about knowing whether it’s a valid tag name or not.

[ljharb]

I suppose the autofix for that case wouldn’t be as safe if it wasn’t a valid tag name; but we could still warn on it.