What is a React Fragment and why use it over a div?

What's really being asked

This question probes whether you understand JSX expression rules and DOM hygiene. React components must return a single root, so the interviewer wants to see if you know the idiomatic way to group siblings without polluting the DOM tree. It also checks if you know the practical difference between a layout wrapper and a non-rendered grouping mechanism.

The full answer

First, define a Fragment as a React component that groups multiple JSX children without adding an actual DOM node. Second, note that the empty tag syntax <></> is shorthand for <Fragment></Fragment> in most cases. Third, explain that because Fragments leave no trace in the DOM, they prevent issues like invalid HTML structure, for example placing a div directly inside a table or inside a list where only li elements are allowed. Fourth, mention that if you need to pass a key to a Fragment, such as when mapping an array, you must use the explicit <Fragment key={id}> syntax because the shorthand does not accept props. Fifth, add that grouping elements in a Fragment has no effect on the resulting DOM and behaves the same as if the elements were not grouped.

The mistakes people make

A common mistake is claiming Fragments improve runtime performance by reducing DOM nodes. While fewer nodes can sometimes help, the primary reason to use Fragments is structural correctness and semantic HTML, not a performance optimization. Another red flag is suggesting you can pass a key or ref to the shorthand <></> syntax; the canonical docs state that explicit Fragment imports are required for keys and refs. Some candidates also incorrectly state that Fragments add a hidden or comment node to the DOM, which is false.

What usually comes next

An interviewer might ask when you would choose a div over a Fragment, which tests your understanding of styling and event delegation. They might also ask how React treats state when switching between a Fragment wrapper and an array wrapper, referencing the fact that React does not reset state when you go from rendering <><Child /></> to [<Child />] or back, though this only works a single level deep. In Canary versions, they could ask about Fragment refs and the FragmentInstance API for managing focus or observing visibility across grouped children.

A concrete example

Imagine a TableRow component that needs to return two cells conditionally. Wrapping them in a div would produce invalid HTML because only td or th elements are allowed inside a tr. Using <><td>Name</td><td>Value</td></> keeps the DOM valid while satisfying the single-parent JSX rule. If these cells came from a map, you would write items.map(item => <Fragment key={item.id}><td>{item.name}</td><td>{item.value}</td></Fragment>) because the shorthand cannot take a key.