What Is a Fragment in React?
Learn what a React Fragment is, why JSX needs it, the shorthand vs keyed syntax, and how Fragments avoid wrapper divs that break CSS layouts.
Expected Interview Answer
A Fragment, written as `<React.Fragment>` or the shorthand `<>...</>`, lets a component return multiple sibling elements from render without wrapping them in an extra DOM node, since JSX requires a single root element.
React components must return one root node, but that requirement often forces developers to add an unnecessary wrapper `<div>` purely to satisfy JSX syntax, which pollutes the DOM and can break CSS layouts relying on direct child selectors like flexbox or grid. Fragments solve this by grouping a list of children under a virtual grouping construct that React understands during rendering but never renders as an actual DOM element. The keyed variant, `<React.Fragment key={id}>`, is required instead of the shorthand whenever fragments appear inside a mapped list, since the shorthand syntax cannot accept a key prop.
- Avoids unnecessary wrapper divs in the DOM
- Keeps CSS selectors like flex/grid children working correctly
- Reduces DOM depth and improves accessibility tree cleanliness
- Supports keys when grouping items inside a list
- Has effectively zero runtime cost
AI Mentor Explanation
A Fragment is like listing three consecutive deliveries on the scorecard as their own entries without inventing a fake 'over summary' row just to hold them together. The scorebook still groups them logically for the over, but no extra blank line appears in the printed sheet, keeping the card exactly as clean as the real deliveries that were actually bowled.
Step-by-Step Explanation
Step 1
JSX requires a single root
A component's return statement must resolve to one root element, so returning sibling elements directly is a syntax error without a wrapper.
Step 2
Fragment groups without a DOM node
`<React.Fragment>` or `<>` groups children so JSX is satisfied, but React never emits an actual wrapper element into the real DOM.
Step 3
Shorthand syntax for the common case
`<>...</>` is sugar for `<React.Fragment>...</React.Fragment>` and is preferred when no key is needed, since it is more concise.
Step 4
Keyed fragments inside lists
When mapping an array to grouped siblings, use the explicit `<React.Fragment key={id}>` form, since the shorthand cannot accept props.
Step 5
Preserves layout-sensitive CSS
Because no extra DOM node is added, CSS relying on direct-child selectors like `flex > *` or CSS Grid item placement keeps working correctly.
What Interviewer Expects
- Knows Fragments solve JSX's single-root-element requirement
- Mentions both the full and shorthand syntax and when each applies
- Understands Fragments emit no actual DOM node
- Knows keyed fragments are required inside mapped lists
- Can explain the CSS/accessibility benefit of avoiding wrapper divs
Common Mistakes
- Trying to pass a key to the `<>` shorthand syntax, which is not supported
- Assuming Fragments render as an actual invisible DOM element
- Reaching for a wrapper `<div>` out of habit when a Fragment would do
- Forgetting Fragments can still be a source of a missing key warning in lists
Best Answer (HR Friendly)
“A Fragment lets a component return several pieces of content at once without adding an extra invisible wrapper element to the page. It keeps the actual webpage's structure clean, which matters for styling and accessibility.”
Code Example
function Row() {
// Shorthand: no wrapper <div> ends up in the DOM
return (
<>
<td>Name</td>
<td>Score</td>
</>
);
}
function List({ items }) {
return items.map((item) => (
// Shorthand can't take a key, so use React.Fragment explicitly
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</React.Fragment>
));
}Follow-up Questions
- Why can't the `<>` shorthand accept a key prop?
- How do Fragments help with CSS Grid or Flexbox layouts?
- What DOM node, if any, does a Fragment actually create?
- When would you choose a wrapper div over a Fragment anyway?
- How do Fragments interact with refs?
MCQ Practice
1. What problem does a Fragment primarily solve?
JSX requires one root node per return, and Fragments let you group siblings without adding a real wrapper DOM element.
2. Which fragment syntax must you use when a key is required inside a list?
The shorthand `<>` cannot take props, so the explicit `React.Fragment` form is required whenever a key is needed.
3. Does a Fragment appear as a node in the rendered DOM?
Fragments are a rendering-time grouping construct; React never inserts any element into the actual DOM for them.
Flash Cards
What syntax is Fragment shorthand for? — `<>...</>` is shorthand for `<React.Fragment>...</React.Fragment>`.
Does a Fragment add a DOM node? — No — Fragments group children for JSX purposes only and never render an actual DOM element.
When must you use the full React.Fragment syntax? — Whenever you need to pass a key, such as inside a mapped list, since the shorthand accepts no props.
Why do Fragments help with Flexbox/Grid layouts? — They avoid an extra wrapper div that would otherwise break direct-child CSS selectors used by those layout systems.