Tujuan Pembelajaran

Memahami React Context
Bisa menggunakan Context API untuk state global

Analogi

Diagram


      Props Drilling = Kirim paket lewat 10 rumah
Context = Dropbox yang bisa diakses semua orang

Context API memungkinkan share state tanpa props drilling

Penjelasan Konsep

Context API

Context API adalah fitur built-in React untuk berbagi state antar component tanpa props drilling. Cocok untuk data yang dianggap global: theme, user authentication, language preference.

Tiga Langkah

createContext — Buat context object.
Provider — Bungkus component tree yang perlu akses context.
useContext — Hook untuk mengakses context value.

Kapan pakai Context?

State yang diakses banyak component di level berbeda.
Theme, auth state, locale/i18n.
Jangan untuk state yang hanya diakses 1-2 level — props lebih baik.

Performance

Context re-render semua consumer saat value berubah. Untuk state yang sering berubah, pertimbangkan state management library.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami React Context., dan bisa menggunakan Context API untuk state global. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca State Management, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Context API memungkinkan share state tanpa props drilling. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. createContext, Provider, useContext — 3 langkah pakai Context API.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button
      className={theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-black'}
      onClick={toggleTheme}
    >
      Switch to {theme === 'light' ? 'dark' : 'light'}
    </button>
  );
}

// APP
function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

Penjelasan Kode

createContext, Provider, useContext — 3 langkah pakai Context API.

Prompt AI

Kapan sebaiknya menggunakan Context vs props biasa?

Pertanyaan Reflektif

Implementasi dark mode dengan Context API dan localStorage persistence.