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.
No comments:
Post a Comment