React Fragments: Group Elements Without a Wrapper
React Fragments let you group multiple elements without adding an extra <div> to the DOM. Use them when a component needs to return adjacent elements, like table cells (<td>).
Why it exists
React components must return a single JSX element. But often, you need to return a group of adjacent elements. Wrapping them in a can create an extra, unnecessary DOM node that breaks HTML structure (like a inside a <tr>) or interferes with CSS styling (like with flexbox or grid layouts).
The mental model
Think of a Fragment as a ghost container. It holds your elements together in your JSX code but disappears when rendered to the browser, leaving only its children directly in the DOM. It groups elements for React without affecting the final HTML output.
How it works
You can use the full syntax, <Fragment>...</Fragment>, or the more common shorthand, <>...</>. The elements you place inside are rendered as siblings in the final HTML. The Fragment itself adds no node to the DOM tree, keeping your markup clean and valid.
When to use it
Use Fragments whenever a component needs to return multiple elements. The classic case is a component that returns several table cells (<td>) to fit inside a parent's table row (<tr>). It's also useful for grouping an element with adjacent text without a wrapper.
When not to use it
Don't use a Fragment if you actually need a wrapper element for styling with CSS classes or for attaching event handlers. Also, the shorthand <></> is not an option when you need to pass a key prop while rendering a list. For lists, you must use the explicit <Fragment key={...}> syntax to avoid warnings and potential bugs.
One canonical example
Imagine a Columns component that needs to render two table cells. Wrapping them in a div would create invalid HTML: <tr><td>...</td></tr>. A Fragment solves this cleanly.
function Columns() {
return (<>
<td>Hello</td>
<td>World</td>
</>
);
}
When this component is used inside a <tr>, the <> disappears, and the final HTML is a valid <tr><td>Hello</td><td>World</td></tr>.
Interview question
What is the main advantage of using a React Fragment (e.g., <></>) over a <div> when a component needs to return multiple elements?
- a.Fragments ensure that the grouped elements are rendered as a single, valid HTML element in the DOM.
- b.Fragments automatically attach event listeners to all child elements, simplifying interaction handling.
- c.Fragments allow applying unique CSS classes to each child element more easily.
- d.Fragments prevent the addition of an unnecessary wrapper DOM node, maintaining cleaner HTML structure.Correct
Why? this is the answer
React Fragments are designed to group multiple elements for React's internal processing without adding an extra DOM node to the final HTML, which is essential for valid HTML structures and avoiding unwanted styling issues. Fragments themselves do not add a DOM node, so they cannot have CSS classes or event listeners applied to them directly.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles