`react-doctor/jsx-no-useless-fragment`

Drop the fragment when it wraps a single child or holds multiple children directly under an HTML tag.

Category: Architecture
Severity: warn
Source: oxlint-plugin-react-doctor
Framework: global
Enabled when: off by default (opt-in)
Documentation: https://oxc.rs/docs/guide/usage/linter/rules/react/jsx-no-useless-fragment

Validation prompt

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

Fires on a fragment (<></>, <Fragment>, or <React.Fragment>) with fewer than two meaningful children — whitespace-only text containing a newline is treated as padding and ignored, so <><Foo /></> and <div><>foo</></div> both trip the single-child path. It also fires, separately, on a fragment with 2+ children sitting directly inside a lowercase HTML element (e.g. <div><>{"a"}{"b"}</></div>), since the element can hold the children directly; this HTML-element branch only triggers when the single-child check did not already report. Several escape hatches suppress it: a key attribute, any {call()} child (e.g. <>{items.map(...)}</>), a single text-only child whose parent is not itself JSX (content={<>text</>}), and allowExpressions: true which permits <>{expr}</>. False positive: a single-child fragment kept intentionally to widen the return type to ReactNode or to keep a conditional symmetric (show ? <>{children}</> : null) — confirm only when the wrapper is genuinely redundant.

Fix prompt

Use this once validation confirms the diagnostic is real.

For a single-child fragment, remove the wrapper and return its lone child directly: <><Foo /></> becomes <Foo />, and <div><>foo</></div> becomes <div>foo</div>. For the multi-child-inside-HTML case, drop the fragment and let the element hold the children: <div><>{"a"}{"b"}</></div> becomes <div>{"a"}{"b"}</div>. For an empty <></> or <Fragment />, delete it entirely or replace it with the value it was standing in for; if a single-child wrapper is deliberate (broadening the return type to ReactNode or keeping branches symmetric), enable allowExpressions for the <>{expr}</> case or leave it as-is rather than collapsing. See https://oxc.rs/docs/guide/usage/linter/rules/react/jsx-no-useless-fragment