Skip to content
You are currently reading docs for v1.x. Go to the latest docs if you are using newer version.

noUselessFragments

Diagnostic Category: lint/complexity/noUselessFragments

Since: v1.0.0

Sources:

Disallow unnecessary fragments

<>
foo
</>
code-block.jsx:1:1 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Avoid using unnecessary Fragment.

> 1 │ <>
│ ^^
> 2 │ foo
> 3 │ </>
│ ^^^
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

1 │ - <>
2 │ - foo
3 │ - </>
1 │ + “foo”
4 2 │

<React.Fragment>
foo
</React.Fragment>
code-block.jsx:1:1 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Avoid using unnecessary Fragment.

> 1 │ <React.Fragment>
│ ^^^^^^^^^^^^^^^^
> 2 │ foo
> 3 │ </React.Fragment>
│ ^^^^^^^^^^^^^^^^^
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

1 │ - <React.Fragment>
2 │ - foo
3 │ - </React.Fragment>
1 │ + “foo”
4 2 │

<>
<>foo</>
<SomeComponent />
</>
code-block.jsx:2:5 lint/complexity/noUselessFragments  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Avoid using unnecessary Fragment.

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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✖ Avoid using unnecessary Fragment.

> 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.

<>
<Foo />
<Bar />
</>
<>foo {bar}</>
biome.json
{
"linter": {
"rules": {
"complexity": {
"noUselessFragments": "error"
}
}
}
}