noUselessFragments (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/complexity/noUselessFragments
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is information.
Sources:
- Same as react/jsx-no-useless-fragment
- Same as react-jsx/no-useless-fragment
- Same as @eslint-react/jsx-no-useless-fragment

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "complexity": {
5
        "noUselessFragments": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow unnecessary fragments

In Astro templates, fragments with props are allowed, for example <Fragment slot="name">.

Examples

Invalid

1
<>
2
    <>foo</>
3
    <SomeComponent />
4
</>

code-block.jsx:2:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This fragment is unnecessary.
  
    1 │ <>
  > 2 │     <>foo</>
      │     ^^^^^^^^
    3 │     <SomeComponent />
    4 │ </>
  
  ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
  
  ℹ Unsafe fix: Remove the Fragment
  
    2 │ ····<>foo</>
      │     --   ---

1
<></>

code-block.jsx:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This fragment is unnecessary.
  
  > 1 │ <></>
      │ ^^^^^
    2 │ 
  
  ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.

1
<Component prop={<><div /></>} />

code-block.jsx:1:18 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This fragment is unnecessary.
  
  > 1 │ <Component prop={<><div /></>} />
      │                  ^^^^^^^^^^^^
    2 │ 
  
  ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
  
  ℹ Unsafe fix: Remove the Fragment
  
    1 │ <Component·prop={<><div·/></>}·/>
      │                   --    ---

The rule doesn’t emit a code fix if the a fragment inside an attribute doesn’t have any value:

1
<Component prop={<>{}</>} />

code-block.jsx:1:18 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This fragment is unnecessary.
  
  > 1 │ <Component prop={<>{}</>} />
      │                  ^^^^^^^
    2 │ 
  
  ℹ A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.

Valid

1
<>
2
foo
3
</>

1
<React.Fragment>
2
foo
3
</React.Fragment>

1
<>
2
    <Foo />
3
    <Bar />
4
</>

1
<>foo {bar}</>