ReactJS – Fragments

While building a ReactJS application, all the JSX code needed to be wrapped down inside a parent tag.

ReactJS Fragments were introduced with React 16.2 version to remove the need to define an extra <div> tag which also takes extra memory.

Without Fragments

The following sample code shows how to create a simple React application without React Fragments.

Example

App.jsx

import React from 'react'; class App extends React.Component {    render() {       return (          <div>             <h2>TutorialsPoint</h2>             <p>Simply Easy Learning</p>          </div>       );    } } export default App;

Output

Using Fragments

In the above example, we have to use an extra <div> tag to wrap the children JSX elements. So with ReactJS 16.2 version, we will use the React.Fragment which will remove the need to use an extraneous <div> tag.

Example

App.jsx

import React from 'react'; class App extends React.Component {    render() {       return (          <React.Fragment>             <h2>TutorialsPoint</h2>             <p>Simply Easy Learning</p>          </React.Fragment>       );    } } export default App;

Output

Shorthand of Fragment

We can also use <>, instead of React.Fragment but this shorthand syntax does not accept key attributes.

Example

import React from 'react'; class App extends React.Component {    render() {       return (          <>             <h2>TutorialsPoint</h2>             <p>Simply Easy Learning</p>          </>       );    } } export default App;

Output