Fragments sind Reacts Antwort auf eine simple, aber lästige JSX-Anforderung: Eine Komponente muss genau ein Wurzel-Element zurückgeben. Wer mehrere Geschwister-Elemente nebeneinander hat, kommt schnell in die Verlegenheit, einen <div> „nur zum Wrappen" einzufügen – mit unerwünschten Auswirkungen auf Layout, CSS und Accessibility. Fragments lösen genau dieses Problem, ohne einen zusätzlichen Knoten ins DOM zu schreiben.
Das Problem ohne Fragment
JSX verlangt ein Wurzel-Element. Folgendes ist nicht erlaubt:
function Greeting() {
return (
<h1>Hallo</h1>
<p>Schön, dich zu sehen.</p>
);
}Der naheliegende Fix: Ein <div> herum. Aber:
function Greeting() {
return (
<div>
<h1>Hallo</h1>
<p>Schön, dich zu sehen.</p>
</div>
);
}Bei Layout-getriebenen Strukturen (Flexbox, Grid, Tabellen) zerstört dieser zusätzliche <div> oft genau das Layout, das man haben wollte.
Die Lösung: Fragment
Fragments sind eine spezielle React-„Komponente", die ihre Kinder rendert, ohne einen eigenen DOM-Knoten zu erzeugen.
Kurzschreibweise
function Greeting() {
return (
<>
<h1>Hallo</h1>
<p>Schön, dich zu sehen.</p>
</>
);
}<> und </> ist die idiomatische Form. Im Browser landen nur <h1> und <p> – kein zusätzlicher Wrapper.
Lange Form
Manchmal braucht man die explizite Form, etwa um key zu setzen oder bei alten Tooling-Setups, die die Kurzschreibweise nicht erkennen.
import { Fragment } from 'react';
function Greeting() {
return (
<Fragment>
<h1>Hallo</h1>
<p>Schön, dich zu sehen.</p>
</Fragment>
);
}Wann brauchst du Fragments wirklich?
Tabellen-Strukturen
In <table>-Markup darf zwischen <tr> und <td> kein <div> stehen. Fragments sind hier oft die einzige saubere Lösung.
function PriceCells({ product }) {
return (
<>
<td>{product.price}</td>
<td>{product.currency}</td>
</>
);
}
function ProductRow({ product }) {
return (
<tr>
<td>{product.name}</td>
<PriceCells product={product} />
</tr>
);
}Listen mit gruppierten Elementen
Wenn pro Listen-Eintrag mehrere Geschwister gerendert werden sollen, brauchst du das Fragment in langer Form, weil ein key gesetzt werden muss:
import { Fragment } from 'react';
function Glossary({ items }) {
return (
<dl>
{items.map((item) => (
<Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
))}
</dl>
);
}Die Kurzform <> akzeptiert keine Props – also auch keinen key.
Fragments und CSS
Da Fragments keinen Knoten ins DOM schreiben, kannst du sie nicht mit CSS ansprechen. Wer Padding, Hintergrund oder Flex-Verhalten braucht, kommt um einen echten DOM-Container nicht herum.
Faustregel:
- Brauchst du nur Gruppierung im JSX -> Fragment.
- Brauchst du Styling, Events oder ARIA-Attribute -> echter DOM-Knoten (
<div>,<section>etc.).
Häufige Stolperfallen
Kurzform mit Props verwenden wollen.
<> akzeptiert keine Props. Wer key braucht, muss <Fragment> schreiben.
Fragment um eine einzelne Komponente legen.
Sinnlos, aber harmlos. <><Avatar /></> ist äquivalent zu <Avatar />.
Fragment mit einem div verwechseln
Fragments rendern nichts ins DOM. Wenn dein Layout-CSS auf einen Container zugreift, der gar nicht existiert, ist das die Ursache.
Linter-Regel react/jsx-no-useless-fragment ignorieren.
ESLint-Plugins warnen bei überflüssigen Fragments (<><div /></>). Lohnt sich, anzunehmen.