Lint Rules

noUselessFragments (since v0.10.0)

Disallow unnecessary fragments

Examples

Invalid

<>
foo
</>
correctness/noUselessFragments.js:1:1 lint/correctness/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━

   Avoid using unnecessary Fragment.
  
  > 1 │ <>
   ^^
  > 2 │ foo
  > 3 │ </>
   ^^^
    4 │ 
  
   Suggested fix: Remove the Fragment
  
    1  - <>
      1+ "
    2 2  foo
    3  - </>
      3+ "
    4 4  
  
<React.Fragment>
foo
</React.Fragment>
correctness/noUselessFragments.js:1:1 lint/correctness/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━

   Avoid using unnecessary Fragment.
  
  > 1 │ <React.Fragment>
   ^^^^^^^^^^^^^^^^
  > 2 │ foo
  > 3 │ </React.Fragment>
   ^^^^^^^^^^^^^^^^^
    4 │ 
  
   Suggested fix: Remove the Fragment
  
    1  - <React.Fragment>
      1+ "
    2 2  foo
    3  - </React.Fragment>
      3+ "
    4 4  
  
<>
    <>foo</>
    <SomeComponent />
</>
correctness/noUselessFragments.js:2:5 lint/correctness/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━

   Avoid using unnecessary Fragment.
  
    1 │ <>
  > 2 │     <>foo</>
       ^^^^^^^^
    3 │     <SomeComponent />
    4 │ </>
  
   Suggested fix: Remove the Fragment
  
    2 │ ····<>foo</>
      --   ---
<></>
correctness/noUselessFragments.js:1:1 lint/correctness/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━

   Avoid using unnecessary Fragment.
  
  > 1 │ <></>
   ^^^^^
    2 │ 
  
   Suggested fix: Remove the Fragment
  
    1 │ <></>
  -----