useSelfClosingElements (since v0.7.0)

This rule is recommended by Rome.

Prevent extra closing tags for components without children

<div></div>

error[jsx/useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  ┌─ jsx/useSelfClosingElements.js:1:1
  │
1 │ <div></div>
  │ ^^^^^^^^^^^

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <div></div>
  0 | + <div />

<Component></Component>

error[jsx/useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  ┌─ jsx/useSelfClosingElements.js:1:1
  │
1 │ <Component></Component>
  │ ^^^^^^^^^^^^^^^^^^^^^^^

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <Component></Component>
  0 | + <Component />

<Foo.bar></Foo.bar>

error[jsx/useSelfClosingElements]: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
  ┌─ jsx/useSelfClosingElements.js:1:1
  │
1 │ <Foo.bar></Foo.bar>
  │ ^^^^^^^^^^^^^^^^^^^

Suggested fix: Use a SelfClosingElement instead
    | @@ -1 +1 @@
0   | - <Foo.bar></Foo.bar>
  0 | + <Foo.bar />

<div />

<div>child</div>

<Component />

<Component>child</Component>

<Foo.bar />

<Foo.bar>child</Foo.bar>