Bir bileşen tek bir kök öğesi döndürmelidir, ancak sık sık bu kuralı yerine getirmek için sadece ekstra bir <div> sarmalayıcı eklemek istemezsiniz (CSS düzenleri flexbox/grid veya HTML yapıları tables gibi şeyleri bozabilir). Fragment çocukları hiç bir DOM düğümü eklemeden gruplandırır.
() {
(
);
}
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış YapBurada <div> kullanmış olsaydınız, geçersiz HTML (<tr><div><td>…) elde ederdiniz ve tablo bozulurdu. Fragment sadece iki <td>'yi render eder.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
fragments listesi render ederken tam formu kullanın, çünkü kısa <> bir key alamaz:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments DOM'u temiz tutar ("wrapper div çorbası" yok), anlamsal/düzen açısından hassas yapıları bozulmaktan korur ve düğüm sayısını biraz azaltır — hepsi sıfır runtime maliyetiyle.