Sebuah komponen harus mengembalikan satu elemen root, tetapi Anda sering tidak ingin menambahkan wrapper <div> ekstra hanya untuk memenuhi aturan itu (dapat merusak CSS layouts seperti flex/grid atau struktur HTML seperti tables). Fragment mengelompokkan children tanpa menambahkan simpul DOM apa pun.
() {
(
);
}
Jika Anda menggunakan <div> di sini sebagai gantinya, Anda akan mendapatkan HTML yang tidak valid (<tr><div><td>…), dan tabel akan rusak. Fragment hanya merender dua <td>.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Gunakan bentuk penuh saat merender daftar fragments, karena bentuk singkat <> tidak dapat mengambil key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments menjaga DOM tetap bersih (tidak ada "wrapper div soup"), menghindari pecahnya struktur semantic/layout-sensitive, dan sedikit mengurangi hitungan node — semuanya tanpa biaya runtime.