Bab 5: Context API

Berbagi state secara efisien tanpa (props drilling).

Masalah: (Props Drilling)

Bayangkan Anda memiliki state di komponen paling atas, tetapi komponen yang membutuhkannya berada 5 level di bawahnya. Anda harus mengoper *prop* tersebut melalui 4 komponen perantara yang sebenarnya tidak membutuhkannya. Proses ini disebut props drilling dan bisa membuat kode menjadi rumit dan sulit dikelola.

Solusi: Context API

Context menyediakan cara untuk (menyiarkan) data ke semua komponen di bawahnya, tanpa harus mengopernya secara eksplisit. Ini sangat berguna untuk data (global) seperti tema (gelap/terang), informasi pengguna yang login, atau bahasa.

3 Langkah Menggunakan Context

1. Buat Context (`createContext`)

Buat sebuah (wadah) untuk data Anda di luar komponen.

const MyContext = createContext();

2. Sediakan Context (`Provider`)

Bungkus komponen induk dengan `MyContext.Provider` dan berikan data yang ingin dibagikan melalui prop `value`.

<MyContext.Provider value={/* data Anda */}>
  <App />
</MyContext.Provider>

3. Gunakan Context (`useContext`)

Di komponen anak mana pun (tidak peduli seberapa dalam), panggil hook `useContext` untuk mengakses data tersebut.

const data = useContext(MyContext);

Contoh: Pengalih Tema (Theme Switcher)

Mari kita buat pengalih tema sederhana. Perhatikan bagaimana `ThemedButton` bisa mengakses `theme` dan `toggleTheme` tanpa menerima props dari `Toolbar`.

Hasil Tampilan Interaktif:

Komponen di bawah ini berada di dalam Provider.