ReactJS – Fragments

In React, fragments allow you to group multiple elements without adding extra nodes to the DOM. This can be useful for maintaining a clean and efficient DOM structure. Fragments are particularly useful when a component needs to return multiple elements, but you don’t want to wrap them in an unnecessary div or another container.

Using Fragments in React

Fragment Syntax

React.Fragment: This is the full syntax.
Short Syntax: You can also use an empty tag (<>) as a shorthand.

Example: Using Fragments

Let’s create a simple example to demonstrate the use of fragments in React.

Step 1: Create a New React Application

First, create a new React application if you don’t have one already

npx create-react-app my-app
cd my-app
npm start

Step 2: Create a Component Using Fragments

Create a new file ListItems.js and add the following code:

import React from 'react';

function ListItems() {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
}

export default ListItems;

You can also use the short syntax for fragments:

import React from 'react';

function ListItems() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

export default ListItems;

Step 3: Use the Component in the App

Modify the App.js file to include the ListItems component:

import React from 'react';
import './App.css';
import ListItems from './ListItems';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React Fragments Example</h1>
        <ul>
          <ListItems />
        </ul>
      </header>
    </div>
  );
}

export default App;

Explanation:

Using Fragments:
- The ListItems component returns multiple li elements.
- Instead of wrapping these li elements in an unnecessary div, we use React.Fragment or the short syntax <>.
Rendering the Component:
- In the App component, the ListItems component is used inside a ul element.
- This ensures that the li elements are direct children of the ul element, maintaining proper HTML structure.

Why Use Fragments?

Cleaner HTML: Avoids adding unnecessary nodes to the DOM, resulting in cleaner and more efficient HTML.
CSS and Styling: Helps avoid unintended side effects with CSS selectors and styles that may be applied to unnecessary wrapper elements.
Performance: Reduces the number of elements in the DOM, potentially improving performance.

Summary

Fragments allow grouping of multiple elements without adding extra nodes to the DOM.
Syntax: Use React.Fragment or the shorthand <> to wrap elements.
Benefits: Cleaner HTML, better styling control, and improved performance.

This simple example demonstrates how to use fragments in React to manage multiple elements without introducing unnecessary wrapper elements in the DOM.

Tutorials Deck

ReactJS