I'm sure anyone that's written anything with React has gotten the error Adjacent JSX elements must be wrapped in an enclosing tag
. Simply put, a React component can only have one HTML element at its root. So if you want to display an h2
tag and a p
tag in the same component, you need to wrap them in something. (Part of the reason I love Svelte is that you can put as many elements as you want in the root of a component.) To solve this error most people do this:
const MyComponent = () => {
return (
<div>
<h2>Title</h2>
<p>Some text.</p>
</div>
)
}
export default MyComponent
But the problem is that when you just use a lot of div
s you create very convoluted DOM output. This image shows the code from one post in a Facebook feed:
The thing is React has built-in syntax that can help fix this. It's the fragment: <>
. You can use it in place of a div
or other HTML tag. So our above code example becomes:
const MyComponent = () => {
return (
<>
<h2>Title</h2>
<p>Some text.</p>
</>
)
}
export default MyComponent
So when should you use a fragment? You should use a fragment anytime you don't need a DOM element for display purposes. The only time you should use a DOM element is when you need it for styling purposes or semantic needs (like wrapping content in an article
element).
Why does this matter? Because it's less DOM that has to be rendered and diffed on re-render, so it can be faster. Also modern CSS features like flexbox
and grid
work so much better when there are fewer elements.
Top comments (2)
I just want to hopefully clarify a few things.
The second to the last paragraph is slightly misleading - it's more of - the need for a parent wrapping div disappears, so instead of having divs all over the place (because its required for JSX), you skip that div parent.
Also misleading - re: less DOM.. but react will still create a Virtual DOM. Browser DOM is not the same virtual dom by react. Also, React needs that diffing, even on fragments. I think it would more accurate to say that there's less nested code.
But great article! It's one of the things that showed up on google when looking up when to use the react fragment.
For more info on fragment, also good to check React's doc on it. reactjs.org/docs/fragments.html
Good to know.