oxc-project/oxc · warning · OxcDiagnostic

Passing a fragment to a HTML element is useless.

Error message

Passing a fragment to a HTML element is useless.

What it means

Second diagnostic of react/jsx-no-useless-fragment: a fragment appears as a direct child of an HTML (host) element, e.g. <div><>foo</></div>. Wrapping children in a fragment inside a plain DOM element adds nothing — the children could be placed directly — so the fragment is useless and the rule offers an autofix that strips the fragment tags. Like the sibling diagnostic it is category pedantic and runs only on JSX sources.

Source

Thrown at crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs:28

    AstKind,
    ast::{
        JSXAttributeItem, JSXAttributeName, JSXChild, JSXElement, JSXElementName, JSXExpression,
        JSXFragment,
    },
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_semantic::NodeId;
use oxc_span::{GetSpan, Span};
use schemars::JsonSchema;
use serde::Deserialize;

fn needs_more_children(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Fragments should contain more than one child.").with_label(span)
}

fn child_of_html_element(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Passing a fragment to a HTML element is useless.").with_label(span)
}

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct JsxNoUselessFragment {
    /// Allow fragments with a single expression child.
    allow_expressions: bool,
}

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow unnecessary fragments.
    ///
    /// ### Why is this bad?
    ///
    /// Fragments are a useful tool when you need to group multiple children without adding a
    /// node to the DOM tree. However, sometimes you might end up with a fragment with a single

View on GitHub (pinned to e1e7af627c)

Solutions

1. Remove the fragment and put its children directly inside the HTML element (oxlint --fix does this automatically)
2. Keep the fragment only if it carries a key or you are deliberately forwarding a grouped children boundary
3. Run oxlint --fix after enabling the rule to sweep existing cases

Example fix

// before
<div><>foo <span>!</span></></div>

// after
<div>foo <span>!</span></div>

npx oxlint -D react/jsx-no-useless-fragment --fix src/

When it happens

Trigger: <div><>foo</></div>, <ul><><li/><li/></></ul>, or any JSXFragment / <React.Fragment> whose parent opening element is a lowercase (HTML) tag. The fixer unwraps the fragment when it is safe to do so (can_fix); otherwise a plain diagnostic is emitted.

Common situations: Migrating wrapper divs to fragments wholesale, including where the parent is already a DOM node; codemods that introduced fragments for keys that were later removed; copy-pasted list templates with redundant grouping.

Related errors

• Fragments should contain more than one child.
• `button` elements must have an explicit `type` attribute.
• `button` elements must have a valid `type` attribute.
• `checked` should be used with either `onChange` or `readOnly
• Use either `checked` or `defaultChecked`, but not both.

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/3ed16c9a70d4d8bc. Report an issue: GitHub.