unnecessaryFragments

Disallow unnecessary JSX fragments that wrap a single child or have no children.

✅ This rule is included in the jsx stylistic presets.

JSX fragments (<>...</> or <Fragment>...</Fragment>) are used to group multiple elements without adding extra nodes to the DOM. However, when a fragment wraps only a single child or has no children at all, it serves no purpose and adds unnecessary complexity to the code.

Examples

❌ Incorre

AEconsB0elemeAE <= sp ansty="le--0:#D6DEEB;--1:#403F">5<3(d ivclassNa="meec-li">AE< sp ansty="le--0:#7FDBCA;--1:#8844">AE<<>d ivclassNa="meec-li">nt < sp ansty="le--1:#8844">CE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Helsp>CA<E6dCd>d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#8844">AE<d>d ivclassNa="meec-li">53d><);d ivclassNa="meco"><);d>AEconsB0elemeEA <= sp ansty="le--0:#7FDB">CA<<>sp ansty="le--0:#D6DEEB;--1:#403F">53Helsp>AE<sp ansty="le--0:#D6DEEB;--1:#403F">5sp><3;d ivclassNa="meco"><>;d>;d>AEconsB0elemeEA <= sp ansty="le--0:#7FDB">CA<><sp ansty="le--0:#D6DEEB;--1:#403F">5sp><3;d ivclassNa="meco"><>;d>;d>AEconsB0elemeAE <= sp ansty="le--0:#D6DEEB;--1:#403F">5<3(d ivclassNa="meec-li">AE< sp ansty="le--0:#7FDBCA;--1:#8844">A82FragmeAd ivclassNa="meec-li">nt < sp ansty="le--1:#8844">CE6dCsp ansty="le--0:#D6DEEB;--1:#403F">53Helsp>CA<E6dCd>d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#8844">AE<82FragmeAd>d ivclassNa="meec-li">53d><);d ivclassNa="meco"><);d>

44AEco61B0ele<44AE spans="tyle--0:#C7">92EDECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53H><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3>>><;di vdivclass="Nameexpressive-">44AEco61B0ele44A1<111" spans="tyle--0:#ECC48D;--1:#98">4E4DH1<111" spans="tyle--0:#D6DEEB;--1:#40">3<;di vdivclass="Nameexpressive-">44AEco61B0ele44A34444dent< spans="tyle--1:#88"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53F><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">Ddent< spans="tyle--1:#88"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53Se><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">Dde44A3F<53) ;divclass="Name"><>)>)><;di vdivclass="Nameexpressive-">44AEco61B0ele44A3444<4AE< spans="tyle--0:#F78C6C;--1:#AA">0982Frag4<4AE spans="tyle--0:#C5E478;--1:#3B">61B<0key spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE >divclass="Nameec-">dent< spans="tyle--1:#88"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53H><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">Dde440982Frag4<4AE >divclass="Nameec-">3F<53) ;divclass="Name"><>)>)>

Options

This rule is not configurable.

When Not To Use It

If your codebase has specific requirements where fragments are used consistently for stylistic reasons, you may want to disable this rule. However, removing unnecessary fragments is generally recommended to keep code concise and maintainable.

Further Reading

• React Documentation: Fragments

Equivalents in Other Linters

• Biome: noUselessFragments
• Deno: jsx-no-useless-fragment
• ESLint: react/jsx-no-useless-fragment@eslint-react/jsx-no-useless-fragment
• Oxlint: react/jsx-no-useless-fragment