React Fragment in React Js
React Fragment Ka Introduction
React Fragment ek React API hai jo hume multiple children ko ek parent component ke andar group karne ki suvidha deta hai, bina ek extra DOM element add kiye.
React Fragment Ka Use Case
Kabhi-kabhi hume ek component mein multiple elements ko render karna hota hai, lekin unhe kisi extra wrapper element (jaise `
`) ke andar wrap nahi karna chahte. React Fragment is situation mein madad karta hai.
React Fragment Code Example
{`import React from 'react';
const MyFragmentComponent = () => {
return (
<>
Fragment ke andar Heading
Yeh ek paragraph hai jo Fragment ke andar render ho raha hai.
);
};
export default MyFragmentComponent;`}
React Fragment Ke Benefits
- Extra DOM elements nahi create hoti, jo ki performance ke liye accha hai.
- Code ko clean aur simple banata hai, kyunki aapko unnecessary wrapper components nahi create karne padte.
- React Fragment ko use karte waqt hum `<>` ka shorthand bhi use kar sakte hain, jo code ko concise banata hai.
Shorthand Fragment Example
{`import React from 'react';
const ShorthandFragmentComponent = () => {
return (
<>
Shorthand Fragment ke andar Heading
Yeh ek paragraph hai jo shorthand Fragment ke andar render ho raha hai.
);
};
export default ShorthandFragmentComponent;`}