unnecessaryFragments

Disallow unnecessary JSX fragments that wrap a single child or have no children.

✅ This rule is included in the jsx stylistic presets.

JSX fragments (<>...</> or <Fragment>...</Fragment>) are used to group multiple elements without adding extra nodes to the DOM. However, when a fragment wraps only a single child or has no children at all, it serves no purpose and adds unnecessary complexity to the code.

Examples

❌ Incorrect

const element = (
  <>
    <div>Hello</div>
  </>
);

const element = <>Hello</>;

const element = <></>;

const element = (
  <Fragment>
    <div>Hello</div>
  </Fragment>
);

✅ Correct

const element = <div>Hello</div>;

const element = "Hello";

const element = (
  <>
    <div>First</div>
    <div>Second</div>
  </>
);

const element = (
  <Fragment key="item">
    <div>Hello</div>
  </Fragment>
);

Options

This rule is not configurable.

When Not To Use It

If your codebase has specific requirements where fragments are used consistently for stylistic reasons, you may want to disable this rule. However, removing unnecessary fragments is generally recommended to keep code concise and maintainable.

Further Reading

• React Documentation: Fragments

Equivalents in Other Linters

• Deno: jsx-no-useless-fragment
• ESLint: react/jsx-no-useless-fragment