Q188- What are React Fragments used for?

React Fragments let you group multiple elements without adding extra nodes to the DOM.

---

⚙️ Why Use Them:

Normally, React components must return a single parent element.
Instead of wrapping everything in a <div>, you can use a Fragment to avoid unnecessary markup.

---

💡 Example (Without Fragment):

function Example() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

This adds an extra <div> to the DOM that isn’t needed.

---

✅ With Fragment:

function Example() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

or explicitly:

import { Fragment } from "react";

function Example() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </Fragment>
  );
}

---

📘 Benefits:

• Keeps the DOM clean (no unnecessary wrappers).
• Useful when rendering lists or table rows.

---

🧩 In Short:

React Fragments allow multiple elements to be grouped together without creating extra DOM nodes.