Fragments in React

Say “Goodbye” to unnecessary divception in the DOM 🎉

Ever inspected the DOM in a React app? Ever greeted with what seems like a constant nesting of <div>s? Had to wrap the content of a component yourself? Even though it didn’t feel semantically correct.

Up until React@16 a component could only return a single element. Return more than one and you’d see a message like “Adjacent JSX elements must be wrapped in an enclosing tag”. This gave you two options, wrap the component content in a single element, or rethink the design. The former tends to be the quicker and easier solution, but not always semantically ideal. It can also lead to littering the DOM with “wrapper” elements. Hands up if you’ve ever wrapped the content of a component in a <div> or <span> ✋

React@16.2 introduces the Fragment component.

For those in camp TL;DR; upgrade to React@16.2 and instead of wrapping elements, use the Fragment component. It reduces littering of the DOM and will help you keep your markup semantic and relevant 🎉

Why <Fragment>?

It’s not uncommon for a component to return more than one element. Before React@16, those elements would need wrapping though. Think of any time that you’ve needed to wrap component content in a wrapper element.

For example, you could do not the following before React@16

class MyAwesomeComponent extends Component {
  render () {
    return (
      <li>Item One</li>
      <li>Item Two</li>
      <li>Item Three</li>
    )
  }
}

You would have to wrap those elements. In the above example, a <ul> or <ol> seems like the right choice but what if that doesn’t fit your design? Your component might be designed to only return dynamic items in a list. You’ll now need to redesign or wrap the <li> in a <span> or something else. Although wrapping the <li> in an element would render them, it would result in invalid markup! 🤦‍

class MyAwesomeComponent extends Component {
  render () {
    return (
      <span>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </span>
    )
  }
}

This is a simple example but there could be many scenarios where you need to wrap your content. Another scenario could be any coupled components. For example, a content list and the accompanying filter. Please feel free to leave a note with other scenarios and examples you’ve come across 🤓

It's worth mentioning that React@16 allows you to return many elements from a component by returning an Array. I would steer clear of this method. It doesn’t help with verbosity nor comprehension of your JSX. It will also take some getting used to. But if you prefer the idea of returning an Array go right ahead 👍

class MyAwesomeComponent extends Component {
  render () {
    return [
      <li key='1'>Item One</li>,
      <li key='2'>Item Two</li>,
      <li key='3'>Item Three</li>,
    ]
  }
}

It’s also not ideal that you’ll have to define a key property for each of those elements. That’s going to get tedious quick 👎

Fragment is a solution allowing you to return many elements from a component. It feels natural and doesn’t litter the DOM with unnecessary wrapper elements 🎉

Using <Fragment>

First you’ll need to upgrade to React@16.2. Done that? Great!

Next, you can either import the Fragment component,

import React, { Component, Fragment } from 'react'

or use it through the React object directly with React.Fragment.

Now, whenever you need to wrap the content of a component and you don’t want to add an extra div or other wrapping element to the DOM, use a Fragment. The content of the component will render as expected but without the wrapping 🎉 🎉

import React, { Component, Fragment } from 'react'
class MyAwesomeComponent extends Component {
  render () {
    return (
      <Fragment>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </Fragment>
    )
  }
}

produces

<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>

with no unnecessary wrapping 😎

That’s the basics of using Fragment and likely the most common way you will use it.

Shorthand syntax + supported attributes

There are some extras to note with Fragment. There is a shorthand syntax that you can use. But, beware it doesn’t support the use of attributes and as of writing, not all tools will support it. But if you want to use it, it looks like this;

<></>

That’s right! A set of empty tags! 🐡 Be wary though, the Fragment syntax is only supported as of Babel v7.0.0-beta.31.

class MyAwesomeComponent extends Component {
  render () {
    return (
      <>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
      </>
    )
  }
}

The last thing to note is that Fragment only supports one attribute. That is the key attribute, used when mapping a collection to an array of components.

That’s it! That’s the new and shiny although not exciting Fragment component. It is pretty cool though 😎. And, one thing’s for sure, it will make your rendered markup easier to explore!

You can see the official documentation for Fragment here and the release notes for React@16.2 here. The latter of which dives much deeper into using Fragment and its current support across different environments 👍

As always, any questions or suggestions, please feel free to leave a response or tweet me 🐦!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.