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:


&lt;div&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
&lt;/div&gt;

You can do this:


&lt;&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
&lt;/&gt;

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:


{imagePairs.map(item =&gt; (
    &lt;React.Fragment key={item.id}&gt;
      &lt;img src={item.imageUrl} /&gt;
      &lt;p&gt;{item.description}&lt;/p&gt;
    &lt;/React.Fragment&gt;
))}

Installation

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


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

Enjoy!