noUselessFragments (JavaScript)
Language JavaScript (and super languages)
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/complexity/noUselessFragments - This rule is recommended, meaning it is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is information.
- Sources:
- Same as
react/jsx-no-useless-fragment - Same as
react-jsx/no-useless-fragment - Same as
@eslint-react/jsx-no-useless-fragment
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "complexity": { "noUselessFragments": "error" } } }}Description
Section titled “Description”Disallow unnecessary fragments
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<> <>foo</> <SomeComponent /></>code-block.jsx:2:5 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This fragment is unnecessary.
1 │ <>
> 2 │ <>foo</>
│ ^^^^^^^^
3 │ <SomeComponent />
4 │ </>
ℹ 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.
ℹ Unsafe fix: Remove the Fragment
2 │ ····<>foo</>
│ -- ---
<></>code-block.jsx:1:1 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This fragment is unnecessary.
> 1 │ <></>
│ ^^^^^
2 │
ℹ 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.
<Component prop={<><div /></>} />code-block.jsx:1:18 lint/complexity/noUselessFragments FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This fragment is unnecessary.
> 1 │ <Component prop={<><div /></>} />
│ ^^^^^^^^^^^^
2 │
ℹ 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.
ℹ Unsafe fix: Remove the Fragment
1 │ <Component·prop={<><div·/></>}·/>
│ -- ---
The rule doesn’t emit a code fix if the a fragment inside an attribute doesn’t have any value:
<Component prop={<>{}</>} />code-block.jsx:1:18 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ This fragment is unnecessary.
> 1 │ <Component prop={<>{}</>} />
│ ^^^^^^^
2 │
ℹ 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.
<>foo</><React.Fragment>foo</React.Fragment><> <Foo /> <Bar /></><>foo {bar}</>Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.