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;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;

You can do this:

    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&gt;
    &lt;img src ="..." /&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;


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