Fragments in React v16.0

I can imagine that everyone of us – working with React on a daily basis – knows the feeling of wrapping your markup with a completely unneeded div tag just to make React happy.

From now we have a <> tag, which is in fact a fragment, and a corresponding closing tag </>, and their use case is exactly the same when you had to wrap your elements with a div before returning in render method.

So instead of doing this:

1
2
3
4
5
<div>

    <img src ="..." />

    <img src ="..." />

    <img src ="..." />

</div>

You can do this:

1
2
3
4
5
<>

    <img src ="..." />

    <img src ="..." />

    <img src ="..." />

</>

If the syntax looks weird to you (well, it is to me), you can use the longer form of <> which is <React.Fragment>.

Fragments also support keyed components, so it is possible to do the following, without introducing any new HTML markup:

1
2
3
4
5
6
{imagePairs.map(item => (

    <React.Fragment key={item.id}>

      <img src={item.imageUrl} />

      <p>{item.description}</p>

    </React.Fragment>

))}

Installation

I have already started upgrading my projects to the latest version so you should too!

1
yarn add react@^16.0.0 react-dom@^16.0.0

Enjoy!