When to Use React Fragment

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 h2tag 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 divs 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.

Comments

[Kuya Joe]

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

[James Thurber]

Good to know.