jsx/prefer-shorthand-fragment

Rule category

Stylistic.

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

❌ Incorrect

<React.Fragment>
  <div />
</React.Fragment>;

<React.Fragment>
  <div />
  <div />
</React.Fragment>;

✅ Correct

<>
  <div />
</>;

<>
  <div />
  <div />
</>;