Context API: Berbagi Data Tanpa Prop Drilling

Masalah: prop drilling

Jika data (misalnya tema gelap/terang atau pengguna yang login) dibutuhkan komponen yang dalam di pohon, kamu harus meneruskan props melewati banyak komponen perantara yang tidak memakainya. Itu melelahkan dan rawan salah.

Context

Context memungkinkan komponen induk menyediakan data yang bisa dibaca oleh semua keturunannya, tanpa props berantai.

Tiga langkah:

1. Buat context

import { createContext } from "react";

export const TemaContext = createContext("terang");   // nilai bawaan

2. Sediakan nilai dengan Provider

function TemaProvider({ children }) {
  const [tema, setTema] = useState("terang");
  const ganti = () => setTema((t) => (t === "terang" ? "gelap" : "terang"));

  return (
    <TemaContext.Provider value={{ tema, ganti }}>
      {children}
    </TemaContext.Provider>
  );
}

Bungkus bagian aplikasi yang membutuhkan:

<TemaProvider>
  <Halaman />
</TemaProvider>

3. Baca nilai dengan useContext

import { useContext } from "react";

function TombolTema() {
  const { tema, ganti } = useContext(TemaContext);
  return <button onClick={ganti}>Tema: {tema}</button>;
}

Komponen mana pun di dalam TemaProvider, sedalam apa pun, bisa memakai useContext(TemaContext).

Perilaku render

Ketika value pada Provider berubah, semua komponen yang membaca context itu dirender ulang. Karena itu:

• Simpan hal yang jarang berubah di context (tema, bahasa, pengguna login).
• Hindari menaruh state yang berubah cepat (posisi mouse, isi input) di context besar.
• Pisahkan context menjadi beberapa yang kecil bila perlu.

Custom hook untuk context

Bungkus useContext agar pemakaian lebih rapi dan aman:

function useTema() {
  const ctx = useContext(TemaContext);
  if (!ctx) throw new Error("useTema harus dipakai di dalam TemaProvider");
  return ctx;
}

Context vs library state global

Context cocok untuk berbagi data yang sederhana. Untuk state kompleks dengan banyak pembaruan, kombinasikan dengan useReducer, atau pakai Redux Toolkit / Zustand.