no-useless-fragment

Rule category

Correctness.

What it does

Prevents the use of useless fragment components or <> syntax.

Why is this bad?

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.

And, it adds unnecessary visual noise to the code.

Examples

Failing

import React, { const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment } from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>foo</const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>;
  //     - Fragments containing a single element are usually unnecessary.
}

Passing

import React, { const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment } from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>
      <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>foo</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>bar</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>baz</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </const Fragment: ExoticComponent<{
    children?: ReactNode | undefined;
}>Lets you group elements without a wrapper node.
@see{@link https://react.dev/reference/react/Fragment React Docs}@example```tsx
import { Fragment } from 'react';

<Fragment>
  <td>Hello</td>
  <td>World</td>
</Fragment>
```@example```tsx
// Using the <></> shorthand syntax:

<>
  <td>Hello</td>
  <td>World</td>
</>
```Fragment>
  );
}

no-unused-state prefer-destructuring-assignment