react/jsx-no-useless-fragment Pedantic
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.
Example
Examples of incorrect code for this rule:
jsx
<>foo</>
<div><>foo</></div>Examples of correct code for this rule:
jsx
<>foo <div></div></>
<div>foo</div>