What are React Fragments and why use them?

Question

Accepted Answer

A component must return a **single root element**, but you often don't want to add an extra wrapper `

` just to satisfy that rule (it can break CSS layouts like fl/grid or HTML structures like tables). A **Fragment** groups children **without** adding any DOM node. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` If you used a `

` here instead, you'd get invalid HTML (`

…`), and the table would break. The Fragment renders just the two ``s. ## Short vs full syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Use the full form when rendering a **list of fragments**, since the short `<>` can't take a `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Why it matters Fragments keep the DOM clean (no "wrapper div soup"), avoid breaking semantic/layout-sensitive structures, and slightly reduce the node count — all with zero runtime cost.