What is the use of Fragment in React ?

Fragment in React is used to combine the child nodes and render without creating an extra parent Node. The Fragment Node is not rendered on the DOM instead it just groups up the elements/ child nodes. In ReactJS, we render the JSX from the component with the help of a return statement that can only return one entity, So when we have to return multiple elements from return statements we usually create the extra node. This extra node has some disadvantages hence to avoid them we use the React Fragment. 

Prerequisites:

• NPM & Node.js
• React JS
• ReactJS JSX
• HTML DOM

Approach to using Fragment in React JS:

The main idea behind the fragment is to group the child components and render on UI as one return statement can’t return multiple elements. Also, it avoids the creation of extra nodes that happen while using the div instead of Fragments.

Steps to Create React Application:

Step 1: Create React Project 

npm create-react-app myreactapp

Step 2: Change your directory and enter your main folder charting as

cd myreactapp

Project Structure:

How does a component render?

Example: This example shows the App component returns a single element hence no need for parent div or the Fragments

Javascript

// Filename - index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />,
    document.getElementById('root'));

Javascript

// Filename - App.js

import React from 'react';

function App() {
  return (
    <h1>Hello There</h1>
  );
}

export default App;

Output: This output will be visible on the http://localhost:3000/ on the browser window.

What if we have to return two different elements at the same level in DOM?

Here we have multiple elements or childs on the return statement that will cause an error. Hence we will use the React Fragment

React Fragment allows us to return the multiple elements from the component, using this we can group the list of children elements.

Example: This example shows the use of react fragment to enclose the childs and avoid the error.

Javascript

// Filename - App.js

import React from "react";

function App() {
    return (
        <React.Fragment>
            <h1>Hello, There</h1>
            <h2>This is the another element.</h2>
        </React.Fragment>
    );
}

export default App;

Output: This output will be visible on the http://localhost:3000/ on the browser window.

Explanation: Although the output remains the same whether using div and frangments but the entire key point is while grouping it doesn’t create any extra node. There are a lot of scenarios where this extra div can lead us to a problematic state that’s why we should always prefer fragments for grouping.

Note: We can also use this <> </> syntactic sugar form instead of <React.Fragment> </React.Fragment>.