react/jsx-no-useless-fragment

A fragment groups several children where only one value fits, such as a return. Around a single child it groups nothing. As a direct child of an HTML element it isn't needed either, because you could write its children there without it.

<Fragment> and <React.Fragment> count the same as <>. With a key they're never reported, because the key needs an element to sit on.

--fix removes the fragment where that's safe.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-no-useless-fragment" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/jsx-no-useless-fragment" = ["error", {
  allowExpressions = false,
}]

Examples

Reported:

function Avatar({ user }) {
  return (
    <>
      <img src={user.photo} alt={user.name} />
    </>
  );
}

const card = (
  <section>
    <>
      <h2>{title}</h2>
      <p>{summary}</p>
    </>
  </section>
);

Not reported:

function Avatar({ user }) {
  return <img src={user.photo} alt={user.name} />;
}

function Card({ title, summary }) {
  return (
    <>
      <h2>{title}</h2>
      <p>{summary}</p>
    </>
  );
}

const names = users.map(user => <Fragment key={user.id}>{user.name}</Fragment>);

Two kinds of single child are allowed, because the fragment turns them into a React element: a function call in braces, and text if the fragment isn't itself a child in JSX.

const label = <>Loading</>;
const rows = <>{renderRows()}</>;

Options

Option	Default	What it does
allowExpressions	false	Allow a fragment around a single expression in braces.

function Slot({ children }) {
  return <>{children}</>;
}

function Slot({ children }) {
  return <>{children}</>;
}