React Fragments क्या हैं और आप उनका उपयोग क्यों करते हैं?

Question

Accepted Answer

एक component को **एकल root element** वापस करना चाहिए, लेकिन अक्सर आप उस नियम को पूरा करने के लिए सिर्फ एक अतिरिक्त `

` wrapper जोड़ना नहीं चाहते (यह CSS layouts जैसे fl/grid या HTML structures जैसे tables को तोड़ सकता है)। एक **Fragment** children को **बिना** कोई DOM node जोड़े group करता है। ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` अगर आप यहाँ `

` का उपयोग करते, तो आपको invalid HTML (`

…`) मिलता, और table टूट जाता। Fragment केवल दो ``s को render करता है। ## संक्षिप्त बनाम पूर्ण syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` पूर्ण रूप का उपयोग करें जब आप **fragments की list** render कर रहे हों, क्योंकि संक्षिप्त `<>` `key` नहीं ले सकता: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## यह क्यों महत्वपूर्ण है Fragments DOM को साफ रखते हैं (कोई "wrapper div soup" नहीं), semantic/layout-sensitive structures को तोड़ने से बचाते हैं, और node count को थोड़ा कम करते हैं — सब कुछ zero runtime cost के साथ।