Wat zijn React Fragments en waarom zou je ze gebruiken?

Question

Accepted Answer

Een component moet **één root element** retourneren, maar je wilt vaak geen extra wrapper `

` toevoegen alleen om die regel na te komen (dit kan CSS layouts zoals flex/grid of HTML-structuren zoals tables kapotmaken). Een **Fragment** groepeert children **zonder** een DOM-knooppunt toe te voegen. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Als je hier in plaats daarvan een `

` gebruikte, zou je ongeldige HTML krijgen (`

…`), en de tabel zou kapot gaan. Fragment geeft alleen de twee ``'s weer. ## Korte versus volledige syntaxis ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Gebruik de volledige vorm wanneer je een **lijst met fragments** weergeeft, omdat de korte `<>` geen `key` kan hebben: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Waarom het belangrijk is Fragments houden de DOM schoon (geen "wrapper div soup"), voorkomen dat semantische/layout-gevoelige structuren breken, en verminderen het aantal nodes licht — allemaal zonder runtime kosten.