no-useless-fragment
Disallows useless fragment elements.
Full Name in eslint-plugin-react-jsx
react-jsx/no-useless-fragmentFull Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-useless-fragmentFeatures
🔧 ⚙️
Presets
strict
strict-typescript
strict-type-checked
Rule Details
A fragment is redundant if it contains only one child or if it is the child of an host element and is not a keyed fragment.
Examples
Returning a single element wrapped in a fragment
// Problem: Fragment with only one child is redundant
<><Foo /></>Using empty fragments
// Problem: Empty fragment serves no purpose
<></>Wrapping children unnecessarily inside a host element
// Problem: Fragment inside a host element is redundant
<p><>foo</></p>// Problem: Fragment inside a host element with no key is redundant
<section>
<>
<div />
<div />
</>
</section>Returning a single expression directly
// Recommended: Return the expression directly instead of wrapping in a fragment
{foo}// Recommended: Return the element directly instead of wrapping in a fragment
<Foo />Using fragments with multiple children or expressions
// Recommended: Fragment with multiple children
<>
<Foo />
<Bar />
</>// OK: Text and expression children (multiple children)
<>foo {bar}</>// OK: Leading space with expression (multiple children)
<> {foo}</>// OK: Expression child (allowed by default via allowExpressions)
<>{children}</>// OK: Expression child (allowed by default via allowExpressions)
<>{props.children}</>// OK: Single text node assigned to a variable
const cat = <>meow</>// OK: Fragment inside a custom component (preserves grouping)
<SomeComponent>
<>
<div />
<div />
</>
</SomeComponent>// OK: Keyed fragment
<Fragment key={item.id}>{item.value}</Fragment>Rule Options
type Options = {
allowEmptyFragment?: boolean;
allowExpressions?: boolean;
};allowEmptyFragment
When set to true, allows fragments that contain no children.
Default: false
allowExpressions
When set to true, allows fragments that contain a single expression child.
Default: true
Note
By default, this rule always allows single expressions in a fragment. This is useful in places like TypeScript where string does not satisfy the expected return type of JSX.Element. A common workaround is to wrap the variable holding a string in a fragment and expression. To change this behavior, use the allowExpressions option.
Examples of correct code for single expressions in fragments
<>{foo}</>
<Fragment>{foo}</Fragment>