In this tutorial, you will learn about React fragments and why they are useful. When working with React we work with JSX rather than HTML. When your React code is compiled all the JSX is converted into vanilla Javascript functions. JavaScript functions cannot return multiple expressions. This meant that when returning JSX from a render method, the JSX had to be nested into a single root node. This would be invalid:

To get around this issue, you may simply wrap an enclosing div, like so:

Adding extra JSX just to make the compiler happy was less than an ideal solution. First, adding unused elements onto a page adds a tiny performance hit. In large applications, this can result in a lot of unneeded divs being rendered onto the page. Second, adding extra divs might affect other elements on the page.

As of React 16.2, we can use Fragments to improve this situation, instead of returning a div place holder you can return a fragment:

React Fragment also provides a much cleaner and simpler syntactic sugar form, <>. So the snippet above can be simplified like this:

Another way to get around the problem is to return a single array of elements, separated by a comma, like this:

If you are not using React Fragments then you definitely should. You can learn more about them here.