Fundamentalsbeginner
Fragments
Learn why Fragments exist and how they let components return multiple elements without adding extra DOM nodes.
A React component's render function must return a single root node, but that node doesn't have to be a real DOM element. React.Fragment (or its shorthand <>...</>) is a special wrapper that groups multiple children without introducing an actual wrapper element into the rendered HTML.
A Fragment is like a transparent folder holding a stack of papers — you can carry the whole stack as one unit, but when you place the papers on the table, only the papers show up, not the folder.
Key Concepts
1
Before Fragments, developers commonly wrapped sibling elements in a <div> just to satisfy the single-root-element requirement. This often broke CSS layouts that depended on direct parent-child relationships, such as flex or grid layouts, and cluttered the DOM with meaningless wrapper nodes.
<div>
2
Fragments solve this cleanly: the JSX compiler treats them as a special element type that React recognizes during rendering and simply unwraps into its children when committing to the DOM. The keyed variant, <React.Fragment key={id}>, is specifically useful when returning fragments from within a list .map() call, since the shorthand <> syntax cannot accept a key.
<React.Fragment key={id}>.map()<>
3
Interviewers sometimes ask when you'd need the long form over the shorthand — the answer is precisely when a key (or in rare cases other props) needs to be attached to the fragment itself.