What are React Fragments?
Learn what React Fragments are, how <> and <React.Fragment> differ, why they avoid extra wrapper divs, and how to key them in lists, with examples.
Expected Interview Answer
React Fragments let you group multiple children into a single parent without adding an extra DOM node like a wrapper div, keeping the rendered markup clean.
A component can only return one root element, but you often need to return several siblings. A Fragment satisfies that rule without polluting the DOM. You write it as <React.Fragment>...</React.Fragment> or the shorthand <>...</>. The shorthand cannot take props, so when you need a key (for example inside a list) you must use the full <React.Fragment key={id}> form.
- Avoids unnecessary wrapper divs
- Keeps the DOM tree flat and semantic
- Prevents broken CSS layouts from extra nodes
- Allows keyed groups in lists
- Improves rendering performance slightly by reducing nodes
AI Mentor Explanation
Think of announcing a batting partnership: you present two players as one unit for the scoreboard without inventing a new team just to hold them together. A Fragment groups sibling elements the same way — it bundles them logically without adding an extra wrapper box around them.
Step-by-Step Explanation
Step 1
Recognize the single-root rule
A component must return one root element, but you may need several siblings.
Step 2
Wrap siblings in a Fragment
Use <> and </> to group the elements without an extra DOM node.
Step 3
Use the full form when needed
Switch to <React.Fragment> when you must pass a key or other prop.
Step 4
Key fragments in lists
When mapping arrays into grouped siblings, give each Fragment a stable key.
Step 5
Verify the DOM
Inspect the output to confirm no wrapper div was added around the children.
What Interviewer Expects
- Knows a component returns a single root
- Explains Fragment avoids extra DOM nodes
- Knows both <React.Fragment> and <> syntaxes
- Understands shorthand cannot take a key
- Can give a real use case like table rows or lists
Common Mistakes
- Always wrapping siblings in a div and bloating the DOM
- Trying to pass a key to the <> shorthand
- Thinking Fragments render an actual element
- Confusing Fragments with Portals
- Forgetting keys when returning fragments from a map
Best Answer (HR Friendly)
“A React Fragment is an invisible wrapper that lets you return several elements together without adding a real box around them in the page. It keeps the page structure clean and avoids unnecessary extra tags.”
Code Example
function ProfileFields({ user }) {
return (
<>
<dt>Name</dt>
<dd>{user.name}</dd>
<dt>Email</dt>
<dd>{user.email}</dd>
</>
)
}
function Glossary({ items }) {
return (
<dl>
{items.map((item) => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.definition}</dd>
</React.Fragment>
))}
</dl>
)
}Follow-up Questions
- Why can't the <> shorthand accept a key?
- When would an extra wrapper div actually break your layout?
- How do Fragments differ from React Portals?
- Can a Fragment have any effect on CSS grid or flex layouts?
- What happens to the Fragment in the final rendered DOM?
MCQ Practice
1. What does a React Fragment add to the DOM?
Fragments group children logically and render nothing extra to the DOM.
2. Which Fragment form can accept a key prop?
Only the explicit <React.Fragment key={...}> form accepts props like key; the shorthand cannot.
3. Why are Fragments useful in a table?
Table markup rejects stray divs; a Fragment groups cells or rows without inserting an invalid wrapper.
Flash Cards
Why use a Fragment? — To return multiple siblings without adding an extra DOM wrapper node.
What is the shorthand syntax? — <>...</>, but it cannot accept props such as key.
When must you use <React.Fragment>? — When you need to pass a key, for example inside a mapped list.
Does a Fragment render an element? — No, it renders nothing itself; only its children appear in the DOM.