Skip to main content

react/useFragmentSyntax

This rule enforces the use of <>...</> over <Fragment>...</Fragment>. The shorthand fragment syntax saves keystrokes and is only unapplicable when keys are required.

ESLint Equivalent: jsx-fragments

Examples

Invalid

<Fragment><Foo /><Foo /></Fragment>

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

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    <Fragment><Foo /><Foo /></Fragment>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>


<React.Fragment><Foo /><Foo /></React.Fragment>

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

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    <React.Fragment><Foo /><Foo /></React.Fragment>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


const Hello = <div><Fragment><Foo /><Foo /></Fragment></div>

 file.tsx:1:19 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = <div><Fragment><Foo /><Foo /></Fragment></div>
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>


const Hello = <div><React.Fragment><Foo /><Foo /></React.Fragment></div>

 file.tsx:1:19 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = <div><React.Fragment><Foo /><Foo /></React.Fragment></
    div>
    ^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


const Hello = <React.Fragment><Foo /><Foo /></React.Fragment>

 file.tsx:1:14 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = <React.Fragment><Foo /><Foo /></React.Fragment>
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


const Hello = <Fragment><Foo /><Foo /></Fragment>

 file.tsx:1:14 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = <Fragment><Foo /><Foo /></Fragment>
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>


function Foo() {
	let bar = <React.Fragment><Foo /><Foo /></React.Fragment>;
	return bar;
}

 file.tsx:2:11 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    1function Foo() {
  > 2  let bar = <React.Fragment><Foo /><Foo /></React.Fragment>;
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3  return bar;
    4}

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


function Foo() {
	let bar = <Fragment><Foo /><Foo /></Fragment>;
	return bar;
}

 file.tsx:2:11 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    1function Foo() {
  > 2  let bar = <Fragment><Foo /><Foo /></Fragment>;
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3  return bar;
    4}

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>


function Hello() {
	return <React.Fragment><Foo /><Foo /></React.Fragment>
}

 file.tsx:2:8 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    1function Hello() {
  > 2  return <React.Fragment><Foo /><Foo /></React.Fragment>
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3}

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


function Hello() {
	return <Fragment><Foo /><Foo /></Fragment>
}

 file.tsx:2:8 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    1function Hello() {
  > 2  return <Fragment><Foo /><Foo /></Fragment>
              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3}

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>


const Hello = () => <React.Fragment><Foo /><Foo /></React.Fragment>

 file.tsx:1:20 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = () => <React.Fragment><Foo /><Foo /></React.Fragment>
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <React.Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </React.Fragment>
      4+ </>


const Hello = () => <Fragment><Foo /><Foo /></Fragment>

 file.tsx:1:20 lint/react/useFragmentSyntax  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  Use shorthand syntax for Fragment elements instead of standard
    syntax.

    const Hello = () => <Fragment><Foo /><Foo /></Fragment>
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Shorthand fragment syntax saves keystrokes and is only unapplicable
    when keys are required.

  Safe fix

    1  - <Fragment>
      1+ <>
    2 2  <Foo·/>
    3 3  <Foo·/>
    4  - </Fragment>
      4+ </>

Valid

<><Foo /><Foo /></>
<Fragment key='id'></Fragment>
<React.Fragment key='id'><Foo /></React.Fragment>
const Hello = <div><Fragment key='word'><Foo /></Fragment></div>
const Hello = <>hello</>
const Hello = <Fragment key='id'><Foo/></Fragment>
const Hello = <React.Fragment key='id'><Foo/></React.Fragment>
function Foo() {
	let bar = <React.Fragment key='word'></React.Fragment>;
	return bar;
}
function Hello() {
	return <React.Fragment key='id'><Foo /></React.Fragment>
}
function Hello() {
	return <Fragment key='id'><Foo /></Fragment>
}
const Hello = () => <></>
const Hello = () => <React.Fragment key='id'></React.Fragment>
const Hello = () => <Fragment key='id'></Fragment>