Sebuah component harus mengembalikan satu elemen root tunggal, namun seringkali Anda tidak ingin menambahkan wrapper <div> tambahan hanya untuk memenuhi aturan itu (ini dapat merusak CSS layouts seperti fl/grid atau struktur HTML seperti tabel). Fragment mengelompokkan anak-anak tanpa menambahkan node DOM apa pun.
() {
(
);
}
Jika Anda menggunakan <div> di sini, Anda akan mendapat HTML yang tidak valid (<tr><div><td>…), dan tabel akan rusak. Fragment merender hanya dua <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Gunakan bentuk lengkap saat merender daftar fragment, karena bentuk singkat <> tidak dapat menerima key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragment menjaga DOM tetap bersih (tidak ada "wrapper div soup"), menghindari pemutusan struktur sensitif semantik/layout, dan sedikit mengurangi jumlah node — semuanya tanpa biaya runtime.