React - Mengatasi Prop Drilling dengan Context API

Halo teman-teman! 👋

Pernahkah kalian merasa terjebak dalam “Prop Drilling Hell”?

Kalian pasti tahu rasanya. Kalian punya data (misalnya nama user) di komponen utama App, tapi kalian perlu menampilkannya di komponen ProfileCard yang bersarang 5 level di bawahnya.

Jadi kalian oper props itu ke Layout, lalu ke Header, lalu ke UserMenu, dan akhirnya sampai ke ProfileCard. Komponen-komponen di tengah itu bahkan tidak pakai datanya! Mereka cuma jadi kurir paket. 📦

Itu ribet banget dan bikin kodingan jadi berantakan.

Solusinya: React Context API

React Context menyediakan cara untuk mengoper data melalui pohon komponen tanpa harus mengoper props secara manual di setiap level.

Bayangkan ini seperti portal teleportasi untuk data kalian. 🌀

Langkah 1: Buat Context

Pertama, kita perlu membuat context-nya. Biasanya, saya buat file terpisah untuk ini.

// contexts/UserContext.js
import { createContext } from 'react';

// Membuat context
export const UserContext = createContext(null);

Langkah 2: Sediakan Datanya (Provider)

Sekarang, kita perlu membungkus bagian aplikasi kita yang butuh data ini dengan sebuah “Provider”.

// App.js
import { useState } from 'react';
import { UserContext } from './contexts/UserContext';
import Header from './Header'; // Ini berisi komponen yang bersarang dalam

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

  return (
    // Kita oper nilai yang mau dibagi ke Provider
    <UserContext.Provider value={user}>
      <div className="app">
        <Header />
      </div>
    </UserContext.Provider>
  );
};

Langkah 3: Gunakan Datanya (Consumer)

Sekarang, komponen apa pun di dalam Provider itu (mau sedalam apa pun) bisa akses datanya langsung!

// components/ProfileCard.js
import { useContext } from 'react';
import { UserContext } from '../contexts/UserContext';

const ProfileCard = () => {
  // Ambil nilai langsung dari context!
  const user = useContext(UserContext);

  if (!user) return <div>Silakan login</div>;

  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.role}</p>
    </div>
  );
};

Lihat kan? Tidak perlu lagi oper-oper props lewat Header atau komponen perantara lainnya.

Kapan harus pakai ini?

Context itu bagus banget untuk data yang sifatnya “global” seperti:

• User yang sedang login
• Tema (Dark/Light mode)
• Bahasa/Localization

Sedikit Peringatan ⚠️

Jangan pakai Context untuk segalanya. Kalau kalian terlalu banyak pakai ini, komponen kalian jadi susah dipakai ulang (reusable) karena jadi bergantung sama context tertentu.

Juga, hati-hati soal performa. Kalau nilai di Provider berubah, semua komponen yang pakai context itu bakal render ulang.

Kesimpulan

Context API adalah alat yang ampuh buat beresin kekacauan prop drilling kalian. Ini sudah bawaan React, jadi kalian tidak butuh library tambahan kayak Redux kalau cuma buat bagi state sederhana.

Coba deh pakai ini kalau kalian merasa sudah mengoper props lebih dari 2 atau 3 level ke bawah!

Happy Coding! 🚀