When to Use React Fragment

Matt Derocher — Mon, 15 Feb 2021 13:49:33 +0000

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.

DEV Community: Matt Derocher

When to Use React Fragment