⏎ 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 │ <></>
      │ -----