🧩 React.Fragment — Group Elements Without Adding Extra DOM Nodes

React.Fragment lets you wrap multiple elements without creating extra

or container tags in the DOM.

🎯 Why use React.Fragment?
• Keeps your DOM clean (no unnecessary wrapper elements)
• Improves performance by avoiding extra nodes
• Helps when returning multiple elements from a component

🔧 Example:

import React from "react"; function List() { return ( <React.Fragment> <li>Apple</li> <li>Banana</li> <li>Orange</li> </React.Fragment> ); } 

💡 Short syntax:

<> <li>Apple</li> <li>Banana</li> <li>Orange</li> </> 

📌 Key points:
• Use or <>
• No extra clutter in your HTML
• Useful in lists, table rows, and any multi-element return

React.Fragment is a small but powerful tool for writing clean, minimal DOM structures.