Fragment in React

React fragments let you group a list of children elements without adding extra nodes to the DOM. This helps keep your HTML clean and avoids unnecessary wrappers that might affect styling or layout.

Why Use Fragments?

• Avoids adding extra div or other wrapper elements.
• Keeps the DOM tree cleaner and simpler.
• Improves rendering performance in some cases.

How to Use Fragments

You can use fragments in two ways:

1. <React.Fragment> ... </React.Fragment>
2. Short syntax: <> ... </>

function Table() {
  return (
    <React.Fragment>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
    </React.Fragment>
  );
}
  

Or using short syntax:

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