Friday, 15 November 2024

Simplifying Your Component Structure using React Fragments

React Fragments are a feature in React that allows you to group multiple elements without adding an extra node to the DOM. This can help to maintain a clean structure in your HTML output, especially when you need to return multiple elements from a component without wrapping them in a parent element like a <div>.

Why Fragments are Needed?

When you want to return multiple elements from a component, you usually need to wrap them in a single parent element. However, adding unnecessary wrapper elements can lead to a cluttered DOM and may cause styling issues or impact performance.

 

Advantages of Using Fragments

1.   Cleaner DOM: Fragments help to keep the DOM tree clean and free from unnecessary nodes.

2.   Performance: Reducing the number of nodes can improve performance, especially in large applications.

3.   Styling Flexibility: Without extra wrappers, you can better control the styling of your components.

 

How to define a fragment?

React Fragments can be defined in a couple of ways.

 

1. Using React.Fragment

You can explicitly use the React.Fragment component to create a Fragment. This method is clear and easy to understand.

import React from 'react';

const MyComponent = () => {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Some content here.</p>
    </React.Fragment>
  );
};

2. Using the Shorthand Syntax

React also provides a shorthand syntax for Fragments, which uses empty tags (<> and </>). This is often preferred for its shorthandness.

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Some content here.</p>
    </>
  );
};

Let us try to understand the behavior with below example

 

User details component without fragment

export function UserDetailsWithoutFragments(){
    return (
        <div>
            <h1>User Details Without Fragment</h1>
            <ul>
                <li>username : Krishna</li>
                <li>email : krishna@abc.com</li>
            </ul>
        </div>
    );
}

Suppose when you add the component ‘UserDetailsWithoutFragments’ to the root element, then the final HTML looks like below. You can observe that the user details are nested in a div.

<div id="root">
  <div>
    <h1>User Details Without Fragment</h1>
    <ul>
      <li>username : Krishna</li>
      <li>email : krishna@abc.com</li>
    </ul>
  </div>

</div>

User details component with fragment

export function UserDetailsWithFragment(){
    return (
        <>
            <h1>User Details With Fragment</h1>
            <ul>
                <li>username : Krishna</li>
                <li>email : krishna@abc.com</li>
            </ul>
        </>
    );
}

Suppose when you add the component ‘UserDetailsWithFragment’ to the root element, then the final HTML looks like below. You can observe that the user details are added as a direct child to the root element, not nested.

<div id="root">
  <h1>User Details With Fragment</h1>
  <ul>
    <li>username : Krishna</li>
    <li>email : krishna@abc.com</li>
  </ul>
</div>

Follow step-by-step procedure to build the complete working application.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘fragement-hello-world’

 

Project structure looks like below.

Step 2: Create a components folder in src/ folder and define UserDetailsWithFragment and UserDetailsWithoutFragments components.

 

UserDetailComponents.jsx

export function UserDetailsWithFragment(){
    return (
        <>
            <h1>User Details With Fragment</h1>
            <ul>
                <li>username : Krishna</li>
                <li>email : krishna@abc.com</li>
            </ul>
        </>
    );
}

export function UserDetailsWithoutFragments(){
    return (
        <div>
            <h1>User Details Without Fragment</h1>
            <ul>
                <li>username : Krishna</li>
                <li>email : krishna@abc.com</li>
            </ul>
        </div>
    );
}

 

Step 3: Create a css folder src/ and define styles.css file.

 

styles.css

 

#root div{
    background-color: lightblue;
    color: red;
}

Step 4: Update main.jsx file with below content.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { UserDetailsWithFragment, UserDetailsWithoutFragments } from './components/UserDetailComponents'

import './css/styles.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <UserDetailsWithFragment />
    <UserDetailsWithoutFragments />
  </StrictMode>,
)

Step 5: Build and run the application by executing below commands.


cd fragment-hello-world
npm install
npm run dev


 

You can confirm the generated html content by inspecting this page.

 


You can download this example from this link.


Previous                                                    Next                                                    Home

No comments:

Post a Comment