Usage of JSX Fragment

Context

Today we have a way to specify fragments in our React, Preact codebase or any other library that adopts such technology.

• Using Fragment from React import:

  import { Fragment } from 'react';
  function MyApp() {
    return <Fragment></Fragment>;
  }

• Importing everything under a scope:

  import * as React from 'react';
  function MyApp() {
    return <React.Fragment></React.Fragment>;
  }

• Using JSX fragment short syntax:

  function MyApp() {
    return <></>;
  }

There are no rules about this introducing inconsistency in the codebase, or in some cases, refactoring of the import style is demanded.

As mentioned before, since React introduced JSX to our toolkit, multiple libraries have adopted JSX, for example, a really popular alternative to React: Preact.

TypeScript introduced a way to specify the Fragment factory to allow people to have more control over the compiled JSX code.

Using React.Fragment couples the JSX to React, although most of your code will probably never move to another library like Preact, the usage of React.Fragment introduces more fragmentation in the ecosystem with little benefits from it.

React team introduced a new JSX Transform that doesn't require React to be imported in the file, allowing JSX to be more agnostic of the library.

Resolution

• You MUST use JSX fragment short syntax <></>.

Links

• react/jsx-fragments ESLint rule about JSX short syntax. We suggest to enable the rule with the following config:

  {
    "rules": {
      "react/jsx-fragments": ["error", "syntax"]
    }
  }