კომპონენტმა უნდა დააბრუნოს ერთი root element, მაგრამ ხშირად არ გსურთ დამატებითი wrapper <div> დამატება მხოლოდ ამ წესის დასაკმაყოფილებლად (ეს შეიძლება გატეხოს CSS layouts როგორიცაა flex/grid ან HTML structures როგორიცაა tables). Fragment აჯამებს children-ებს რომელიმე DOM node-ის დამატების გარეშე.
() {
(
);
}
ეს დროს თუ <div> გამოიყენებდით, მიიღებდით invalid 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>
שהשתמש full form-ში როდესაც კიდეგ list of fragments, ვინაიდან short <> ვერ იღებს 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-ს — ყველა zero runtime cost-ით.