يجب أن تعيد المكون عنصراً جذراً واحداً فقط، لكن غالباً لا تريد إضافة عنصر wrapper <div> إضافي فقط لتلبية هذه القاعدة (قد يكسر تخطيطات CSS مثل flexbox/grid أو الهياكل الـ HTML مثل الجداول). Fragment يجمع العناصر الفرعية بدون إضافة أي عقدة DOM.
() {
(
);
}
إذا استخدمت <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 soup")، وتتجنب كسر الهياكل الدلالية/الحساسة للتخطيط، وتقلل قليلاً من عدد العقد — كل هذا بدون أي تكلفة runtime.