oxc-project/oxc · warning · OxcDiagnostic

Fragments should contain more than one child.

Error message

Fragments should contain more than one child.

What it means

Primary diagnostic of react/jsx-no-useless-fragment (category: pedantic, with autofix). A fragment (<>...</> or <React.Fragment>) with fewer than two children is unnecessary — grouping exists only to wrap multiple children, so a single child (element, expression, or none) does not need it. The rule skips fragments that carry a key attribute and, by default, reports fragments with a single expression child only when allowExpressions is false; a fragment containing only text that is not itself a child of another node is also exempt. oxlint attaches an automatic fix that unwraps the fragment.

Source

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

    utils::is_jsx_fragment,
};
use oxc_allocator::ArenaVec;
use oxc_ast::{
    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.
    ///

View on GitHub (pinned to e1e7af627c)

Solutions

1. Unwrap the fragment: replace <>{foo}</> with {foo} (oxlint's --fix applies this suggestion automatically)
2. If the single child is intentional grouping (rare), set { "allowExpressions": true } so <>{expr}</> is permitted
3. Give the fragment a second real child if grouping was the point, or add a key if it participates in a list
4. Run oxlint --fix across the repo once after enabling the rule to clear existing occurrences

Example fix

// before
const label = <>{count}</>;

// after
const label = {count};  // or just: count

npx oxlint -D react/jsx-no-useless-fragment --fix src/  # autofix unwraps single-child fragments

When it happens

Trigger: <>{foo}</> (single expression child, allowExpressions false), <><Card/></> (single element child), or an entirely empty fragment <></>; also render helpers returning <>{items}</> where items is a single expression. The suggestion fixer removes the fragment tags when safe (can_fix).

Common situations: Refactoring away wrapper elements by swapping div for a fragment but forgetting to remove it when only one child remains; prettier-style formatting that wraps single expressions in fragments; codemods that wrapped everything and left stragglers.

Related errors

• Passing a fragment to a HTML element is useless.
• `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/b4b6db7179d415c0. Report an issue: GitHub.