एक घटक एक root element परत करणे आवश्यक आहे, परंतु अनेकदा तुम्हाला फक्त हा नियम पूर्ण करण्यासाठी अतिरिक्त wrapper <div> जोडायचा नसतो (हे CSS layouts जसे flex/grid किंवा HTML structures जसे tables तोडू शकते). Fragment children-ला कोणतेही DOM node जोडल्याशिवाय गटबद्ध करतो.
() {
(
);
}
जर तुम्ही येथे <div> वापरले, तर तुम्हाला अवैध HTML (<tr><div><td>…) मिळेल, आणि टेबल तुटेल. Fragment केवळ दोन <td> प्रस्तुत करतो.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
fragments यादी प्रस्तुत करताना पूर्ण फॉर्म वापरा, कारण लघु <> key घेऊ शकत नाही:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments DOM स्वच्छ ठेवतात ("wrapper div soup" नाही), semantic/layout-sensitive structures तोडणे टाळतात, आणि node count मध्ये थोडेसे घट करतात — सर्व शून्य runtime खर्चासह.