In this article, you will learn how to use React Fragments effectively in order to return multiple elements. React Fragments were originally introduced in React v16 and instantly became popular within the React community. React Fragments lets you group a list of children without adding extra div tags. That is a one small step for you, one giant leap for smaller and cleaner DOM.

Let's reflect on this using a casual situation which we come across on a daily basis.

Copycopy code to clipboard
1const App = () => (
2  <Header />
3  <Content />
4  <Footer />
5);

This piece of code looks straight-forward enough to fully understand it, yet no matter how it looks, it is going to bring Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag. In this situation we usually were fixing it with wrapping everything within the div tags and it was working quite well, yet it had one downside - it was adding extra elements to the DOM.

Copycopy code to clipboard
1const App = () => (
2  <div>
3    <Header />
4    <Content />
5    <Footer />
6  </div>
7);

With the release of the React v16, React Fragments API has being introduced which the core idea was to remove the need for wrapping everything within an extra div tags.

Copycopy code to clipboard
1const App = () => (
2  <React.Fragment>
3    <Header />
4    <Content />
5    <Footer />
6  </React.Fragment>
7);

Simple as that we make our DOM cleaner!

Related — How to loop JSX in React

Shorthand

Please be aware that shorthand syntax is only available in Babel 7+!

Copycopy code to clipboard
1const App = () => (
2  <>
3    <Header />
4    <Content />
5    <Footer />
6  </>
7);