Fragments are a syntax that allow you to build a react component with multiple nodes or subcomponents, without requiring a wrapper element.

A fragment is considered to be redundant if:

it contains only one child,
it is the child of a html element,
it is not a keyed fragment.

Removing the fragments can fix this issue.

Bad Practice

// Example 1
<>{foo}</>

// Example 2
<><Foo /></>

// Example 3
<p><>foo</></p>

// Example 4
<></>

// Example 5
<Fragment>foo</Fragment>

// Example 6
<React.Fragment>foo</React.Fragment>

// Example 7
<section>
  <>
    <div />
    <div />
  </>
</section>

Recommended

// Example 1
<>
  <Foo />
  <Bar />
</>

// Example 2
<>foo {bar}</>

// Example 3
<> {foo}</>

// Example 4
const cat = <>meow</>

// Example 5
<SomeComponent>
  <>
    <div />
    <div />
  </>
</SomeComponent>

// Example 6
<Fragment key={item.id}>{item.value}</Fragment>

References

Fragments

Huthaifa-Dev / project

No ignore rules found