noUselessFragments
Diagnostic Category: lint/complexity/noUselessFragments
Since: v1.0.0
Sources:
- Same as: 
react/jsx-no-useless-fragment 
Description
Section titled “Description”Disallow unnecessary fragments
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<>foo</>code-block.jsx:1:1 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ Avoid using unnecessary Fragment.
  
  > 1 │ <>
      │ ^^
  > 2 │ foo
  > 3 │ </>
      │ ^^^
    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
  
    1   │ - <>
    2   │ - foo
    3   │ - </>
      1 │ + “foo”
    4 2 │   
  
<React.Fragment>foo</React.Fragment>code-block.jsx:1:1 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ Avoid using unnecessary Fragment.
  
  > 1 │ <React.Fragment>
      │ ^^^^^^^^^^^^^^^^
  > 2 │ foo
  > 3 │ </React.Fragment>
      │ ^^^^^^^^^^^^^^^^^
    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
  
    1   │ - <React.Fragment>
    2   │ - foo
    3   │ - </React.Fragment>
      1 │ + “foo”
    4 2 │   
  
<>    <>foo</>    <SomeComponent /></>code-block.jsx:2:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ Avoid using unnecessary Fragment.
  
    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</>
      │     --   ---
<></>code-block.jsx:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ Avoid using unnecessary Fragment.
  
  > 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.
  
<>    <Foo />    <Bar /></><>foo {bar}</>How to configure
Section titled “How to configure”{  "linter": {    "rules": {      "complexity": {        "noUselessFragments": "error"      }    }  }}