react/jsx-no-useless-fragment Pedantic

💡 A suggestion is available for this rule.

What it does

Disallow unnecessary fragments.

Why is this bad?

Fragments are a useful tool when you need to group multiple children without adding a node to the DOM tree. However, sometimes you might end up with a fragment with a single child. When this child is an element, string, or expression, it's not necessary to use a fragment.

Examples

Examples of incorrect code for this rule:

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

Examples of correct code for this rule:

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

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/jsx-no-useless-fragment --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-useless-fragment": "error"
  }
}

References

• Rule Source