Dear JavaScript Aficionado,

We can easily say that React is the coolest JS library for building user interfaces.

But sometimes, it faces us with not-so-easy decisions to make…

Like:

Should we use a fragment or a div?

As you know, a react component can’t render multiple JSX elements. If there are numerous such elements, then they must be wrapped with a “root” one. Otherwise, we get the following error:

"JSX expressions must have one parent element"

Before React 16.2.0, we used to wrap multiple JSX elements within a div.

That’s not a perfect solution!

Why?

Because in this case, we stuff the final HTML document with lots of unnecessary DOM nodes, which have no other purpose than just making our components “renderable.”

And that leads to a bigger-in-size and more complex document.

So the smart guys behind the library came up with the solution of using fragments instead of divs. And fragments don’t get included in the DOM.

Here is a code snippet without a fragment:

import React, { Fragment } from 'react';

export default function Section({ children, note }) {  
    return (
        <div className="call-to-action">  
            {note && <Alert message={note} />} 
            {children}

        </div>) 
}

And here is a code snippet with a fragment

import React, { Fragment } from 'react';

export default function Section({ children, key, note }) { 
    return (
        <Fragment key={key} > 
            {note && <Alert message={note} />} 
            {children}

        </Fragment>)
}

We also have the option to use the shorthand version of React.Fragment – the so-called “empty tag”:

import React from 'react';

export default function Layout({ children }) { 
    return (
        <>
            <Navigation />
            {children}
        </>)
}

So we have three options, but which is the right one?

When To Use Div VS React.Fragment VS Empty Tag

Case 1: You need to apply CSS styles or assign event handlers to the group of elements

Suppose the group of elements you’re wrapping needs to be responsive to user interaction, or it must be styled. In that case, you must definitely use a div because fragments can’t have properties with a tiny exception that we’ll discuss in a minute.

Case 2: You will create the react component in a loop

In this case, you must use <React.Fragment> because it can take a “key” property, and as you may know, every element must be assigned a key when it’s created through iteration.

Case 3. You want to wrap a bunch of elements quickly

You don’t have to think in advance about how you will use the new component you’re making. If you need to assign it a key at some point, you can easily refactor the component in a few seconds.

If later you need to style it in some way or assign event handlers, then it’s easy to replace the fragment with a div.

So don’t overthink it…

Be Happy,

Sashe

P.S. Are you a hard-core fan of JavaScript and React? Then I suggest you check out my JavaScript newsletter. You will find discussions on more advanced topics related to web development with these technologies.