Fragment allows multiple elements to return without creating extra <div> tags.

Why Use Fragment?

Normally React components must return only one parent element.

Without Fragment:

return (
 <div>
   <h1>Hello</h1>
   <p>React</p>
 </div>
)

Sometimes extra <div> tags create unnecessary HTML structure.

Fragment Syntax

Method 1: Using <React.Fragment>

import React from 'react';
function App() {
 return (
   <React.Fragment>
     <h1>Hello</h1>
     <p>Welcome to React</p>
   </React.Fragment>
 );
}

export default App;

Method 2: Short Syntax <> </>

This is the most commonly used method.

function App() {
 return (
   <>
     <h1>Hello</h1>
     <p>Welcome to React</p>
   </>
 );
}
export default App;