react-doctor/self-closing-comp

Use the self-closing form `<X />` for elements with no children.

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on a JSXElement that carries an explicit closing tag yet has no real children — either zero children or a single JSXText child that is whitespace containing a newline (<X>\n</X>) — meaning <X /> would render identically. Custom components (PascalCase, member like Foo.Bar, or namespaced) and lowercase HTML tags are both flagged, but the component and html settings can independently silence either group. False positive / non-trigger to watch: single-line whitespace with no newline (<X> </X>), an expression child like <div>{' '}</div>, and entity children like <div> </div> are all intentionally left alone — only flag when the element is genuinely childless.

Fix prompt

Use this once validation confirms the diagnostic is real.

Collapse the empty element to its self-closing form, dropping the redundant closing tag: rewrite <Hello name="John"></Hello> (or the multi-line <div className="content">\n</div>) as <Hello name="John" /> and <div className="content" />. This is a purely stylistic equivalence — behavior and output are unchanged, so it is safe to apply mechanically. If a single space is intentional content, use <X> </X> (no newline) or <X>{' '}</X>, which the rule already permits. See https://oxc.rs/docs/guide/usage/linter/rules/react/self-closing-comp

Previous pagereact-doctor/react-compiler-destructure-methodNext pagereact-doctor/state-in-constructor