How to use fragments in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Returning multiple elements from React components without creating unnecessary wrapper divs is essential for clean, semantic HTML structure.
As the creator of CoreUI with over 25 years of development experience building React applications since 2014, I’ve used React Fragments extensively to maintain proper HTML semantics in our component library.
The most efficient approach is using the short syntax <>...</> or the explicit <React.Fragment> when you need to pass keys.
This technique eliminates extra DOM nodes and prevents CSS layout issues caused by unwanted wrapper elements.
Use React Fragment short syntax <>...</> to group multiple elements without adding extra DOM nodes.
function UserCard() {
return (
<>
<h2>John Doe</h2>
<p>Software Developer</p>
<span>Active</span>
</>
)
}
React Fragments allow you to return multiple JSX elements from a component without wrapping them in a parent element like a div. The short syntax <>...</> is the most concise way to create fragments, while <React.Fragment>...</React.Fragment> is useful when you need to pass the key prop in lists. This keeps your DOM structure clean and prevents unnecessary nesting that could interfere with CSS Grid, Flexbox, or semantic HTML structures.
Best Practice Note:
This is the approach we use throughout CoreUI React components to maintain clean HTML structure without wrapper divs.
Use the explicit <React.Fragment key={id}> syntax when rendering fragments in lists that require unique keys for React’s reconciliation process.
