Skip to main content

react/noUselessFragment

disallow unnecessary fragments

ESLint Equivalent: jsx-no-useless-fragment

Examples

Invalid

<>{foo}</>

 file.tsx:1 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    <>{foo}</>
    ^^^^^^^^^^

  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.

  Safe fix

    1  - <>
    2  - {foo}
    3  - </>
      1+ {foo}


<p><>foo</></p>

 file.tsx:1:3 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    <p><>foo</></p>
       ^^^^^^^^

  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.

  Safe fix

    1  - <>
    2  - foo
    3  - </>
      1+ foo


<></>

 file.tsx:1 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    <></>
    ^^^^^

  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.

  Safe fix

  - <></>


<React.Fragment>foo</React.Fragment>

 file.tsx:1 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    <React.Fragment>foo</React.Fragment>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  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.

  Safe fix

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


<Fragment>foo</Fragment>

 file.tsx:1 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    <Fragment>foo</Fragment>
    ^^^^^^^^^^^^^^^^^^^^^^^^

  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.

  Safe fix

    1  - <Fragment>
    2  - foo
    3  - </Fragment>
      1+ foo


<section>
	<>
		<div />
		<div />
	</>
</section>

 file.tsx:2:1 lint/react/noUselessFragment  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Avoid using unnecessary Fragment.

    1<section>
  > 2  <>
       ^^
  > 3    <div />
  > 4    <div />
  > 5  </>
     ^^^^^
    6</section>

  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.

  Safe fix

    1  - <>
    2  - <div·/>
    3  - <div·/>
    4  - </>
      1+ <div·/>
      2+ <div·/>

Valid

<>
	<Foo />
	<Bar />
</>
<>foo {bar}</>
<> {foo}</>
const cat = <>meow</>
const cat = () => <>meow</>
function cat() {
	return <>meow</>;
}
function cat() {
	const foo = <>meow</>;
	return foo;
}
<SomeComponent>
	<>
		<div />
		<div />
	</>
</SomeComponent>
<Fragment key={item.id}>{item.value}</Fragment>
true ? <div></div> : <></>;