Pola React: Obat Ampuh untuk Prop Drilling

Halo, Teman Ngoding! 👋

Saya mau bahas satu “penyakit” yang sering banget menjangkiti codebase React, terutama yang baru berkembang. Namanya Prop Drilling.

Pasti kamu pernah merasakan gejalanya. Kamu butuh mengoper data user dari komponen paling atas (App), sampai ke komponen Avatar yang nyempil 5 level di bawahnya.

Alhasil, kodingan kamu jadi begini: App -> Dashboard -> Header -> UserProfile -> Avatar.

Setiap komponen di rantai itu terpaksa menerima props user dan mengopernya ke bawah, padahal mereka sendiri nggak butuh data itu! Ini ribet, bikin komponen jadi kotor (“Zombie Props”), dan susah di-refactor.

Biasanya, junior dev langsung buru-buru pakai Context API atau Redux buat mengatasi ini. Eits, tunggu dulu! Ada cara yang jauh lebih simpel dan “React banget”.

Namanya Component Composition.

Masalah “Drilling”

Coba lihat kekacauan yang mau kita perbaiki ini.

const App = () => {
  const [user, setUser] = useState({ name: "Budi" });
  return <Dashboard user={user} />;
};

const Dashboard = ({ user }) => {
  // Dashboard nggak butuh user, tapi Header butuh!
  return (
    <div className="layout">
      <Header user={user} />
      <MainContent />
    </div>
  );
};

const Header = ({ user }) => {
  // Header nggak butuh user, tapi UserProfile butuh!
  return (
    <header>
      <h1>Aplikasi Saya</h1>
      <UserProfile user={user} />
    </header>
  );
};

const UserProfile = ({ user }) => {
  return <div>Halo, {user.name}!</div>;
};

Lihat Dashboard dan Header? Mereka cuma jadi “calo” atau perantara. Mereka tercemar oleh props yang sebenarnya bukan urusan mereka.

Solusinya: “Angkat Konten ke Atas”

Daripada App menyuruh Dashboard buat “Nih titip data buat anak kamu”, App bisa bilang “Nih, SAYA kasih ANAKNYA langsung”.

Di sini kita pakai props spesial bernama children.

const App = () => {
  const [user, setUser] = useState({ name: "Budi" });

  // Kita buat komponennya DI SINI, di mana datanya berada
  return (
    <Dashboard>
      <Header>
        <UserProfile user={user} />
      </Header>
    </Dashboard>
  );
};

Supaya ini jalan, kita perlu update komponen perantara tadi biar menerima children.

const Dashboard = ({ children }) => {
  return (
    <div className="layout">
      {children} {/* Render aja apapun yang dikasih! */}
      <MainContent />
    </div>
  );
};

const Header = ({ children }) => {
  return (
    <header>
      <h1>Aplikasi Saya</h1>
      {children} {/* Render profil di sini! */}
    </header>
  );
};

Kenapa ini lebih oke?

1. Nggak Ada Props Sampah: Dashboard dan Header sekarang nggak kenal sama si user. Kamu bebas ubah struktur data user tanpa perlu edit komponen layout itu.
2. Fleksibel: App sekarang pegang kendali penuh. Kalau kamu mau ganti UserProfile jadi LoginButton, tinggal ganti di App. Nggak perlu ngacak-ngacak Dashboard.
3. Nggak Perlu Context: Kamu nggak perlu bikin Context Provider, nge-wrap satu aplikasi, dan pakai hooks ribet. Cuma pakai props biasa.

Pola “Slots” (Named Composition)

Kadang children aja nggak cukup karena kamu butuh naruh komponen di beberapa tempat berbeda (misalnya Sidebar di kiri, Konten di kanan).

Kamu bisa oper komponen sebagai props biasa!

const Layout = ({ left, right }) => {
  return (
    <div className="flex">
      <div className="w-1/3">{left}</div>
      <div className="w-2/3">{right}</div>
    </div>
  );
};

const App = () => {
  return (
    <Layout
      left={<Sidebar />}
      right={<NewsFeed />}
    />
  );
};

Ini persis kayak kamu ngoper string atau angka. Di React, Element itu cuma value. Bisa dioper-oper kayak variabel biasa.

Penutup

Sebelum kamu buru-buru pakai Context atau library state management yang berat, coba tanya dulu: “Bisa nggak ya komponennya diangkat aja trus dioper ke bawah?”

Component Composition itu tulang punggungnya React. Kalau kamu jago ini, komponen kamu bakal jauh lebih bersih, gampang dipakai ulang, dan gampang dites.

Stop drilling, start composing!

Happy Coding! 🚀