React Fragment vs Div – which one should you use?

React Fragment vs Div is a common question that faces developers when they are designing a new React component.

Should we use React Fragment or Div?

We should use React Fragment when we want to group a list of children nodes without adding any extra nodes. Unlike a typical div, a fragment is not rendered on the DOM. This basically means that we can use React.Fragment where we usually use a div. However, there are a few points to consider before making the decision between React Fragment or Div.

1 – What is React.Fragment?

React.Fragment is a special tag that helps us group a bunch of DOM nodes. Let us see it in action.

Consider that we have a normal React component as below. Basically, we want this component to render a h2 tag and a p tag. However, since every React component should have a parent DOM node, we need to wrap these two nodes within a div.

const NormalComponent = () => {
    return (
        <div>
            <h2>Normal Component</h2>
            <p>This is a normal component</p>
        </div>
    )
}

export default NormalComponent;

We can now use this component within another component.

function App() {
  return (
    <div className="App">
       <NormalComponent />
    </div>
  );
}

When we inspect this element in the DOM, we will see a structure as below:

<div class="App">
   <div>
      <h2>Normal Component</h2>
      <p>This is a normal component</p>
   </div>
</div>

As expected, we have the div node wrapping the other nodes. For all purposes, this div is useless. In fact, it may even mess up with the CSS of your application. It also introduces un-necessary levels in our DOM hierarchy.

By using React Fragment, we can avoid adding extra nodes to our DOM. Instead of the div, we wrap the h2 and p tags within React.Fragment.

See below example:

import React from 'react';

const FragmentComponent = () => {
    return (
        <React.Fragment>
            <h2>Fragment Component</h2>
            <p>This is a fragment component</p>
        </React.Fragment>
    )
}

export default FragmentComponent;

When we render this component inside another component, we get the below DOM hierarchy.

<div class="App">
   <h2>Fragment Component</h2>
   <p>This is a fragment component</p>
</div>

As you can see, we don’t have the extra div.

Note here that React now has first class support for Fragments. However, earlier this was facilitated by using a special package known as React Addons Create Fragment. However, the react-addons-create-fragment package is now deprecated.

2 – React Fragment Shorthand

React Fragment Shorthand is a new, shorter syntax that replaces React.Fragment. Basically, instead of React.Fragment, we simply use <>. This is also known as the empty tag.

An empty tag is the same as writing React.Fragment. In other words, we can use empty tag and React.Fragment interchangeably with a few exceptions.

See below example of using an empty tag instead of React.Fragment:

import React from 'react';

const FragmentComponent = () => {
    return (
        <>
            <h2>Fragment Component</h2>
            <p>This is a fragment component</p>
        </>
    )
}

export default FragmentComponent;

3 – Can a React Fragment have Props?

React Fragment cannot have props. However, fragments declared explicitly with React.Fragment can have keys. This is useful if React.Fragment is used for a component that is going to be used as part of a list.

See below example:

import React from 'react';

const FragmentComponent = () => {
    return (
        <dl>
            {props.books.map(book => (               
                <React.Fragment key={book.id}>
                    <h2>{book.title}</h2>
                    <p>{book.genre}</p>
                </React.Fragment>
            ))}
        </dl>
    )
}

export default FragmentComponent;

If we don’t use a key with React.Fragment in a list, we get a key related warning. This is common React behavior.

Also, we can use keys only with React.Fragment. With empty tag, we cannot use keys. This is a major difference between React.Fragment and empty tag.

4 – When to use React Fragment?

We should use React Fragment when we want to keep our DOM hierarchy simple. By using React Fragment, we can avoid extra DOM nodes just for wrapping our component HTML nodes. In a large application with many components, using React Fragment can have a significant impact.

However, it is also important to know the limitations of React Fragment. Fragments in React don’t support props other than keys. Also, keys cannot be applied to shorthand form of React Fragment i.e. the empty tag.

With these aspects in mind, we can choose between React Fragment vs Div and make an informed decision.

Want to learn more about React? Check out this post on ReactJS Functional Components.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.