{"record":{"id":"3ed16c9a70d4d8bc","repo":"oxc-project/oxc","slug":"passing-a-fragment-to-a-html-element-is-useless","errorCode":null,"errorMessage":"Passing a fragment to a HTML element is useless.","messagePattern":"Passing a fragment to a HTML element is useless\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs","lineNumber":28,"sourceCode":"    AstKind,\n    ast::{\n        JSXAttributeItem, JSXAttributeName, JSXChild, JSXElement, JSXElementName, JSXExpression,\n        JSXFragment,\n    },\n};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_semantic::NodeId;\nuse oxc_span::{GetSpan, Span};\nuse schemars::JsonSchema;\nuse serde::Deserialize;\n\nfn needs_more_children(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Fragments should contain more than one child.\").with_label(span)\n}\n\nfn child_of_html_element(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Passing a fragment to a HTML element is useless.\").with_label(span)\n}\n\n#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct JsxNoUselessFragment {\n    /// Allow fragments with a single expression child.\n    allow_expressions: bool,\n}\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow unnecessary fragments.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// Fragments are a useful tool when you need to group multiple children without adding a\n    /// node to the DOM tree. However, sometimes you might end up with a fragment with a single","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_no_useless_fragment.rs#L10-L46","documentation":"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.","triggerScenarios":"<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.","commonSituations":"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.","solutions":["Remove the fragment and put its children directly inside the HTML element (oxlint --fix does this automatically)","Keep the fragment only if it carries a key or you are deliberately forwarding a grouped children boundary","Run oxlint --fix after enabling the rule to sweep existing cases"],"exampleFix":"// before\n<div><>foo <span>!</span></></div>\n\n// after\n<div>foo <span>!</span></div>","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-no-useless-fragment --fix src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never nest a fragment directly inside a plain HTML element — place the children directly","After removing wrapper divs in refactors, re-run oxlint so leftover fragments get unwrapped","Keep fragments only where they carry a key or group children across a boundary"],"tags":["react","jsx","fragment","html-element","autofix","oxlint","lint"],"backgroundTag":"react-useless-fragment","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}