Context When Needed
Membagikan preference kecil ke beberapa component yang berjauhan tanpa menjadikan context sebagai default semua state.
Tujuan belajar
- Menjelaskan masalah prop drilling yang nyata
- Membuat context kecil untuk shared preference
- Memilih props biasa saat component masih dekat dan alurnya jelas
Isi lesson
5 blok- 1.Context menyelesaikan sharing, bukan semua stateBelum selesaiWajib
- 2.Theme preference kecil lewat contextBelum selesaiWajib
- 3.Checklist sebelum membuat contextBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Context menyelesaikan sharing, bukan semua state
WajibContext berguna saat value yang sama perlu dibaca oleh beberapa component yang berjauhan di tree, misalnya theme preference, locale, atau informasi user yang memang dipakai luas. Dengan context, component perantara tidak perlu menerima props yang hanya diteruskan.
Namun context bukan pengganti props untuk semua hal. Jika parent dan child dekat, props masih paling jelas karena aliran datanya terlihat langsung. Membuat context terlalu awal dapat menyembunyikan pemilik state dan membuat component sulit dipakai ulang di luar provider.
Bagian ini memengaruhi progres lesson.
Theme preference kecil lewat context
Wajibimport { createContext, useContext, useState } from "react";
type Theme = "light" | "dark";
const ThemeContext = createContext<Theme>("light");
function ThemeLabel() {
const theme = useContext(ThemeContext);
return <p>Tema aktif: {theme}</p>;
}
function SettingsPage() {
const [theme, setTheme] = useState<Theme>("light");
return (
<ThemeContext.Provider value={theme}>
<button type="button" onClick={() => setTheme("dark")}>
Gunakan dark mode
</button>
<ThemeLabel />
</ThemeContext.Provider>
);
}SettingsPage tetap memiliki state preference. Provider membagikan value ke child yang membutuhkannya, termasuk jika suatu saat child berada beberapa level lebih dalam.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibChecklist sebelum membuat context
Pastikan value memang dibutuhkan beberapa component yang berjauhan. Coba props biasa terlebih dahulu bila alurnya pendek. Buat context kecil dengan satu tanggung jawab, misalnya theme preference. Jangan memasukkan semua state application ke satu context besar hanya untuk menghindari props.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBagikan theme lewat React context
Latihan membuat context kecil untuk theme yang dibaca oleh preview dan toggle di dalam settings page.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Context membantu saat shared value diperlukan lintas component tree.
- Props tetap tepat untuk data yang mengalir dekat dan jelas.
- Provider membagikan value dari pemilik state ke component pemakai.
- Context kecil dengan tanggung jawab tunggal lebih mudah dipahami daripada context besar.
- Berikutnya, Uji Kompetensi akan menggabungkan keputusan lokasi state, derived value, reducer, dan context.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Context menyelesaikan sharing, bukan semua state.