Rules
no-useless-fragment

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: React.ExoticComponent<{
    children?: React.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: React.ExoticComponent<{
    children?: React.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: React.ExoticComponent<{
    children?: React.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: React.ExoticComponent<{
    children?: React.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: React.ExoticComponent<{
    children?: React.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: React.ExoticComponent<{
    children?: React.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
>
); }