React Fragments: Solusi Kode Bersih tanpa 'DIV Soup' (Edisi Santuy)

Halo, Koki Kode! 👨‍🍳

Pernah gak sih kamu buka DevTools di browser, inspect elemen aplikasi React kamu, dan ngerasa ngeri liat tumpukan <div> di dalem <div> di dalem <div>? Itu namanya “Div Soup” alias Sup Div, dan rasanya gak enak banget.

<div>
  <div>
    <div>
      <div>
        <h1>Halo Dunia</h1>
      </div>
    </div>
  </div>
</div>

Jelek, berantakan, dan bikin pusing. Hari ini, kita bakal beresin kekacauan ini pake alat sederhana tapi sakti: React Fragments.

Ambil sendokmu, yuk kita bersihin sup ini! 🥣

Aturan “Satu Orang Tua”

Di React, fungsi render (atau return di komponen) wajib ngembaliin tepat satu elemen induk (root element). Kamu gak boleh ngembaliin dua elemen sejajar tanpa dibungkus.

Ini bakal bikin error:

// ❌ Error! React bakal teriak.
const Menu = () => {
  return (
    <h1>Beranda</h1>
    <h1>Tentang</h1>
  );
};

React butuh satu pembungkus buat elemen-elemen ini. Jadi, biasanya kita ngapain? Kita bungkus pake <div>.

// 😐 Jalan sih, tapi ada harganya...
const Menu = () => {
  return (
    <div>
      <h1>Beranda</h1>
      <h1>Tentang</h1>
    </div>
  );
};

Kenapa “Bungkus Div” itu Jelek?

”Ya elah, cuma nambah satu div doang,” mungkin pikirmu. Kalau satu sih oke. Tapi bayangin kalau kamu bikin komponen Tabel.

const BarisTabel = () => {
  return (
    <div>
      <td>Sel 1</td>
      <td>Sel 2</td>
    </div>
  );
};

// Cara pake:
<table>
  <tr>
    <BarisTabel />
  </tr>
</table>

Hasil HTML-nya bakal kayak gini:

<table>
  <tr>
    <div>  <!-- 😱 HTML Ilegal! -->
      <td>Sel 1</td>
      <td>Sel 2</td>
    </div>
  </tr>
</table>

<div> itu gak boleh jadi anak langsung dari <tr>. Ini ngerusak struktur HTML kamu dan bisa bikin styling hancur, apalagi kalau kamu pake Flexbox atau Grid.

Kenal Lebih Dekat: React Fragment

React sadar masalah ini dan ngasih kita Fragments. Fragment ngebolehin kita nge-grup banyak elemen anak tanpa nambahin node ekstra di DOM. Anggap aja ini kayak Bungkus Hantu. 👻

import { Fragment } from 'react';

const Menu = () => {
  return (
    <Fragment>
      <h1>Beranda</h1>
      <h1>Tentang</h1>
    </Fragment>
  );
};

Pas ini di-render di browser, si Fragment bakal ilang! Kamu cuma dapet:

<h1>Beranda</h1>
<h1>Tentang</h1>

Bersih. Cantik. Valid.

Sintaks Pendek: <> ... </>

Karena programmer itu pemalas (eh, efisien!), ada cara yang lebih cepet nulisnya. Kamu bahkan gak perlu import Fragment.

const Menu = () => {
  return (
    <>
      <h1>Beranda</h1>
      <h1>Tentang</h1>
    </>
  );
};

Tag kosong <> ini cuma gula-gula sintaks (syntactic sugar) buat React.Fragment. Fungsinya sama persis.

Kapan Harus Pake Nama Lengkap?

Ada satu kasus di mana kamu gabisa pake sintaks pendek <>: Looping dengan Key.

Kalau kamu lagi nge-map array dan mau ngembaliin Fragment, kamu seringkali butuh ngasih props key. Sintaks pendek itu gak bisa nerima atribut.

const Glosarium = ({ items }) => {
  return (
    <dl>
      {items.map(item => (
        // ✅ Kita butuh 'key', jadi pake Fragment secara eksplisit
        <React.Fragment key={item.id}>
          <dt>{item.istilah}</dt>
          <dd>{item.deskripsi}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
};

Kalau kamu maksa nulis <key={item.id}>, itu bakal error.

Kesimpulan

Fragments itu fitur kecil yang dampaknya gede banget buat kualitas kode.

1. DOM Lebih Bersih: Gak ada lagi div sampah.
2. HTML Valid: Gak ada lagi div nyasar di dalem ul atau tr.
3. CSS Lebih Aman: Gak ada lagi wrapper div yang ngeblok layout Flex/Grid.

Jadi, besok-besok kalau tanganmu gatel mau nambahin <div> cuma buat menuhin aturan React, tahan! 🛑 Pake Fragment <> aja.

Kode kamu (dan browser kamu) bakal berterima kasih.

Selamat Ngoding! 🚀