prefer-shorthand-fragment

Rule category

Style.

What it does

Enforces the usage of <></> over <React.Fragment></React.Fragment>.

Why is this good?

<></> is shorter and more readable. And it does not require importing React or the Fragment component.

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>
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
    </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>
  );
}

Passing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return (
    <>
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
      <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button />
    </>
  );
}

prefer-shorthand-boolean dom/no-children-in-void-dom-elements