Why you should be using Fragments

In the last blog post (see here) we looked at why need to wrap our React elements in a div, please see here if you haven't already read that post!

At the end of that post we discussed why having unnecessary div elements entering the DOM could potentially cause problems. Well I guess there must have been a solution to this right ?

In the React release 16.2, a new feature was introduced called a React fragment. Think of this as a component that doesn't translate to HTML.

Instead of using <div>'s to wrap our elements we use or the short hand syntax <>.

Here below we have the typical solution to error you get when you don't wrap your React elements in a div.

import React from 'react'

const App = () => {
  return (
           <div> 
              <p>Hello</p>
              <p>World</p>
           </div>
      )
    }

Here's how we'd rewrite this using React.fragment

import React from 'react'
const App = () => {
  return ( 
           <React.fragment>
             <p>Hello</p>
             <p>World</p>
           </React.fragment>
      )
    }

Now writing React.fragment can be a pain! So React also introduced the <> syntax

import React from 'react'
const App = () => {
  return ( 
           <>
             <p>Hello</p>
             <p>World</p>
           </>
      )
    }

React.fragment gets converted into regular JavaScript by a transpiler and after conversion looks like this. Something we've seen in a previous post!

React.createElement(React.fragment, null, ...children)

The difference is, it does not get inserted into the DOM!

What are the advantages to Fragments

As explained in a previous article. Here are the main reasons why you'd use fragments.

1. Your react application is getting bigger and the number of useless divs in the DOM are mounting up.

2. The performance is slightly better and so if you are wanting to shave some time off then this may be a way to do it.

3. When you are concerned with layout and the rendering of the eventual HTML does not compute with how the layout should appear

How can I use them

1. Returning groups of Elements

This one is taken straight from the React docs. Suppose we want to render a table using React. Well wrapping the td tags in a div will not render the table correctly! However using React fragment does!

import React, Fragment from 'react'
const App = () => {
  return ( 
           <React.fragment>
               <td>Hello</td>
               <td>World</td>
           </React.Fragment>
      )
    }

This renders to

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

2. Conditionally Rendering

Here we are rendering a form that either tells us if the user has logged in or not. If not, we use Fragments to display multiple React Elements that display the form to login. If it is true then we display a logged in message. Note we are using the ternary operator to do this type of conditional rendering!

const App = () => {
  return ( 
           <form>
             {LoggedIn ? (
            <React.Fragment>
              <h3>Welcome</h3>
              <p>You are logged in!</p>
            </React.Fragment>
        ) : (
            <React.Fragment>
              <h3>Login</h3>
              <label for="username">Username</label><br/>
              <input type="text" id="username" /><br/>
              <label for="password">Password</label><br/>
              <input type="password" id="password" /><br/>
              <input type="submit" value="Login" />
            </React.Fragment>
        )}
      </form>
      )
    }

3. Displaying Arrays with Fragments

Now sometimes you will want to display an array but in order to do this, React recommends you include a key property. This is because it makes it easier for react to change the DOM based on this. Now do note that you should use React.fragment rather than <>, as of now <> does not support the use of a key property.

const App = () => { 
  users = [
      {
        id: 1,
        name: "User1"
        phone: "123456789"
      },
      {
        id: 2,
        name: "User2",
        phone: "234567890"
      },
      {
        id: 3,
       name: "user2",
       phone: "345678901"
    }
  ]
  return (
     <React.Fragment>
        {this.users.map(user => (
          <React.Fragment key={user.id}>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <p>{user.phone}</p>
          </React.Fragment>
        ))}
    </React.Fragment>
  )
}

About the Author

I'm a practising medical physician and educationalist as well as a web developer.

Please see here for further details about what I'm up to project-wise on my blog and other posts.

I'd be grateful for any comments or if you want to collaborate or need help with python please do get in touch. If you want to get in contact with me, please do so here
[e-mail]

Comments

[Andrew Bone]

I think you made a typo when showing the <> syntax. You have to have the closing slash 😊

import React from 'react'
const App = () => {
  return ( 
    <>
      <p>Hello</p>
      <p>World</p>
    </>
  )
}

[Aaron Smith]

Hi Andrew.

Thanks so much for the feedback! I've never liked writing code on here haha!

Kind regards
Aaron