Avoid redundant DOM node with React.Fragment

I recently found out this great feature that you can use to avoid unnecessary DOM node when creating children nodes in a component. It’s React’s 16 new functionality and in earlier versions if you wanted to do something like:

You would get the following error:

Adjacent JSX elements must be wrapped in an enclosing tag

The solution for this is just to wrap children elements in e.g. <div>.

Currently in React 16 the solution would be to use React.Fragment:

In the DOM:

So it’s a great wait to avoid unnecessary nodes. You can also use components as children for React.Fragment as well as mark it with a key.

Find out more at the official page.