Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang aplikasinya mulai besar dan state terasa makin berantakan
• Pemula yang capek harus meneruskan props lewat banyak layer komponen
• Siapa pun yang bingung: “Sekarang perlu Context, Zustand, atau Redux?”

Apa yang akan Anda pelajari

• Cara menentukan kapan local state masih cukup
• Cara pakai Context API untuk nilai shared di level aplikasi
• Kriteria praktis kapan mulai pakai Zustand atau Redux

Mengapa topik ini penting

Arsitektur state adalah salah satu faktor terbesar yang menentukan React app enak dikembangkan atau tidak.

Kalau scope state jelas, fitur baru lebih cepat masuk dan bug lebih gampang dilacak. Kalau state terlalu menyebar atau terlalu dipusatkan, semuanya terasa lebih ribet dari seharusnya.

Konsep inti

Prop drilling

• Mengirim props melewati banyak layer komponen
• Menurunkan keterbacaan saat aplikasi membesar

Prop drilling tidak selalu buruk. Masalahnya muncul saat komponen perantara cuma jadi “kurir props”.

Context API

• Menyediakan nilai bersama tanpa rantai props panjang
• Cocok untuk theme, auth, dan pengaturan umum

Context paling cocok untuk nilai global yang dipakai banyak komponen.

Store libraries

• Berguna saat interaksi state menjadi kompleks
• Dipakai saat memang diperlukan

Store library membantu saat update state sering, lintas fitur, dan mulai susah ditalar.

Panduan langkah demi langkah

Langkah 1 — Identifikasi shared state

Kelompokkan state berdasarkan cakupan:

• local state per halaman/komponen,
• state bersama level fitur,
• state global aplikasi (theme/auth/preferensi).

Langkah 2 — Implementasi Context provider

Buat provider + custom hook untuk satu concern dulu (misal: theme).

Jaga fokus, jangan langsung jadi “super context”.

Langkah 3 — Evaluasi kebutuhan skala

Kalau Context mulai bikin rerender luas atau flow update makin kompleks, evaluasi store library.

Aturan praktis: naik level tools hanya saat kompleksitas sekarang memang menuntut.

Contoh praktis

Contoh 1 — Bentuk Context

type ThemeContextValue = {
	theme: "light" | "dark";
	toggleTheme: () => void;
};

Tip:

• Bentuk value context sebaiknya kecil, jelas, dan spesifik.

Contoh 2 — Konsep penggunaan provider

• Bungkus root app dengan provider
• Konsumsi lewat custom hook di child component

Pattern biar tetap rapi:

• export ThemeProvider dan useTheme() dari satu module yang sama.

Kesalahan umum dan cara menghindarinya

• Semua state dipaksa masuk Context -> biarkan state lokal tetap lokal
• Rerender seluruh tree untuk update kecil -> pecah context per concern
• Pilih Redux karena tren -> selesaikan dulu kompleksitas yang benar-benar ada
• Tidak ada aturan ownership state -> tentukan siapa pemilik dan updater setiap domain state

Mini Project

• Buat setup state aplikasi kecil dengan:
• toggle theme,
• sesi user ala auth sederhana,
• satu contoh local state yang tetap di luar Context.

Bonus:

• Amati pola rerender lalu pecah context jika memang diperlukan.

Latihan cepat

• Refactor satu alur prop drilling ke Context
• Pecah satu context besar menjadi dua context fokus
• Tulis kapan Anda perlu beralih ke store library
• Tulis satu catatan “keputusan scope state” untuk project Anda saat ini

Ringkasan utama

• Keputusan scope state harus eksplisit, bukan kebetulan
• Context sangat kuat untuk banyak kebutuhan global state pemula-menengah
• Store library dipakai saat kompleksitasnya nyata, bukan supaya terlihat advanced

Langkah berikutnya

Lanjut ke [14. Pola Integrasi API].