Detailed explanation
A React Fragment groups multiple children without creating an extra DOM element. A component must return one JavaScript value, so adjacent JSX elements need to be combined into a single expression. A fragment provides that grouping while leaving the rendered HTML unchanged. You can write it using the short syntax, <>...</>, or the explicit form, <Fragment>...</Fragment>, after importing Fragment from React. React.Fragment is another option when React is imported. Unlike a div, a fragment is not an HTML container and cannot be styled as one.
Fragments are especially useful when an extra wrapper would create invalid HTML or change layout behaviour. In the example, returning <><td>Name</td><td>Score</td></> lets a component supply two table cells without placing a div around them. The parent must still render that component inside a tr; the fragment itself does not make cells valid in every context. For flexbox and grid, an unnecessary wrapper changes which elements are direct children of the layout container. Removing that wrapper with a fragment lets the intended elements participate directly as flex or grid items.
Under the hood, React understands a fragment as a grouping structure in its element tree and reconciles its children without creating a corresponding browser DOM node. The children still produce their usual DOM elements. This distinction matters because React’s component structure does not have to match the DOM structure one-to-one. With no wrapper element, there is no container on which to apply className, styles, or ordinary DOM event handlers. If you need a styled box, a semantic element, or a container-level click handler, use a suitable HTML element instead.
The explicit form is important when rendering a list in which each item produces several sibling elements: <Fragment key={item.id}>...</Fragment>. The short syntax cannot receive a key. A stable key helps React match each group with its previous version when items are inserted, removed, or reordered. Interviewers usually expect you to explain the missing DOM wrapper, show both syntaxes, identify a practical table or layout example, and distinguish grouping from cases that genuinely require a DOM container.
Key points to remember
- Fragments group sibling elements without adding a DOM wrapper.
- Use <>...</> for concise grouping and an explicit Fragment when a key is needed.
- Table cells returned in a fragment still need a tr parent.
- Fragments preserve intended direct-child relationships in flex and grid layouts.
- Use an HTML element instead when you need styling, semantics, or a container-level event handler.
Common mistakes candidates make
- Assuming a fragment renders an invisible div that can receive CSS classes.
- Trying to attach a key to the short <>...</> syntax.
- Using fragments everywhere, even when a semantic or styled container is required.
Likely follow-up questions
Why does a fragment need a key inside map()?
When each list item returns a group of siblings, React needs a key on the outer group to track its identity across updates. Use <Fragment key={item.id}>...</Fragment> with a stable identifier.
Are fragments always better than div elements?
No: a fragment is appropriate when you only need grouping. Use a div or a suitable semantic element when you need an actual container for layout, styling, or meaning.
Can a component return an array instead of a fragment?
Yes, React can render an array of elements, but elements in that array should have stable keys. A fragment is usually clearer for a fixed group of siblings because its children do not require keys solely for being grouped.
Interview tip: Start with “grouping without an extra DOM node,” illustrate it with the table-cell example, and finish with the keyed Fragment distinction.