React Fragment lets you group multiple elements without adding an extra node to the DOM. It's useful when you need to return multiple elements from a component but don't want to wrap them in a div.
// Using React.Fragment
function MyComponent() {
return (
<React.Fragment>
<h1>Title</h1>
<p>Description</p>
</React.Fragment>
);
}
// Using short syntax
function MyComponent() {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
}
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The diagram below the answer is the concept .
Jump to it ↓
Tailored explanation · switch back to · ·
What should the new diagram focus on?
How well did you know this?
AI:
Saved in this browser - sign in to keep your review list.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Keep going - a few more words and AI can grade it.
Interview lens
How interviewers actually use this question
Likely follow-ups
You map a list and each item renders two sibling elements. How do you give each group a key?Wrap the pair in <React.Fragment key={item.id}>. The <> short syntax can't take a key, so it won't work here.
Why not just wrap the siblings in a div? Give a case where that breaks something.A div inside a <tr> or <ul> is invalid HTML. An extra wrapper can also break flex or grid layouts and CSS direct-child selectors.
A component can also return an array. How does that compare to using a Fragment?Arrays render too, but every element needs a key and you separate elements with commas. A Fragment groups fixed children without keys.
Can you put a className or an onClick on a Fragment?No. A Fragment leaves no DOM node, so there is nothing to style or attach a handler to. Use a real element when you need one.
Does swapping divs for Fragments make your app noticeably faster?Rarely. It saves DOM nodes and a little memory, which only shows up in very large, deep trees. The main reason to use one is valid, clean markup.
What you can say
A Fragment lets a component return several elements as one group without adding an extra node to the DOM.
JSX needs a single parent, so without it you'd wrap siblings in a div that exists only to satisfy that rule.
You write it as React.Fragment or the short empty-tag syntax, and React renders just the children.
I use it when a wrapper would break things, like a component that returns table cells into a row, or a flex layout that lays out its direct children.
The one catch is keys. If you map a list of fragments, use the long React.Fragment form, because the short syntax can't take a key.
And if the group needs a class or an event handler, a Fragment has no DOM node to hold them, so use a real element.
Weak answers to avoid
Calls a Fragment an invisible divA div is a real DOM node, and a Fragment leaves nothing behind. Say that React renders only the children, so there is no node to style or select.
Can't name a case beyond 'avoids a div'Give a case where a wrapper actually breaks something, like <td>s returned into a <tr>, or a flex or grid parent that expects direct children.
Puts a key on the short <> syntaxThe short form takes no attributes. For keyed lists, say you'd use <React.Fragment key={id}>. That tells the interviewer you've written it in real code.
Sells Fragments as a big performance winEach Fragment saves one DOM node, and that is all. Lead with valid markup and layout, and mention performance as a small extra at most.
Interview lens
Likely follow-ups, what you can say, and the weak answers to avoid.
