React Fragments

Fragments in React let you group multiple elements without adding extra nodes to the DOM. They’re helpful when you want to return multiple elements from a component but avoid unnecessary wrappers like <div>.

Why Use Fragments?

• No extra DOM nodes: Keeps the DOM clean.
• Performance: Reduces unnecessary nesting and improves rendering.
• Flexibility: Useful in lists, tables, and when returning sibling elements.

Basic Usage:

Using <React.Fragment>:

import React from "react";

const Example = () => {
return (
<React.Fragment>
<h1>Hello World</h1>
<p>This is a React Fragment example.</p>
</React.Fragment>
);
};

export default Example;

Resulting DOM:

No <div> wrapper is added!

Short Syntax:

React also provides a short syntax using empty tags <> and </>:

const Example = () => {
return (
<>
<h1>Hello World</h1>
<p>Using short syntax for fragments.</p>
</>
);
};

This behaves exactly the same as <React.Fragment>.

Keyed Fragments (Useful in Lists):

When rendering lists, you can use key with fragments:

const items = ["React", "Vue", "Angular"];

const List = () => {
return (
<>
{items.map((item) => (
<React.Fragment key={item}>
<h2>{item}</h2>
<p>Popular framework/library.</p>
</React.Fragment>
))}
</>
);
};

When to Use Fragments:

1. Returning Multiple Elements:
   Components that return siblings without extra wrappers.

2. Lists/Tables:
   Rendering multiple <td> elements inside a <tr> without wrapping <div>s.

   const TableRow = () => (
   
   <tr>
   <>
   <td>Name</td>
   <td>Age</td>
   </>
   </tr>
   );

3. Optimizing DOM Structure:
   Avoid deeply nested nodes when they’re unnecessary.