---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: componentFragment.jsx
---
# Input
```jsx
import { Suspense } from "react";
import { Comp } from "./components/Comp";

export function Component() {
  return (
    <div>
      <Suspense fallback={<></>}>
        <h1>Hi</h1>
      </Suspense>

      <Comp prop={<></>} />
    </div>
  );
}
```

# Diagnostics
```
componentFragment.jsx:7:27 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using unnecessary Fragment.
  
    5 │   return (
    6 │     <div>
  > 7 │       <Suspense fallback={<></>}>
      │                           ^^^^^
    8 │         <h1>Hi</h1>
    9 │       </Suspense>
  
  i 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.
  

```

```
componentFragment.jsx:11:19 lint/complexity/noUselessFragments ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Avoid using unnecessary Fragment.
  
     9 │       </Suspense>
    10 │ 
  > 11 │       <Comp prop={<></>} />
       │                   ^^^^^
    12 │     </div>
    13 │   );
  
  i 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.
  

```