useContext untuk State Global
Buat Context, bungkus subtree dengan Provider-nya, dan gunakan useContext untuk memakai nilainya agar state tema atau autentikasi dapat dibagikan tanpa meneruskan props berantai.
useContext untuk State Global adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Masalah dengan Prop Drilling
Prop drilling berarti meneruskan data melalui banyak komponen perantara yang tidak menggunakannya, hanya agar data tersebut mencapai anak yang berada jauh di dalam pohon. Konteks mengatasi hal ini dengan membuat suatu nilai tersedia bagi komponen mana pun di dalam pohon tanpa perlu meneruskannya secara eksplisit.
Membuat Konteks
createContext(defaultValue) membuat objek Context. Nilai bawaan digunakan ketika komponen membaca konteks tanpa Penyedia yang sesuai di atasnya.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Menyediakan Konteks
Bungkus bagian pohon yang memerlukan konteks dengan Penyedia. Semua komponen di dalamnya dapat membaca nilai konteks.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Menggunakan useContext
Komponen apa pun di dalam penyedia dapat mengakses nilai konteks dengan useContext(ThemeContext). Anda tidak perlu meneruskan apa pun sebagai properti.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Hook Kustom untuk Membungkus useContext
Ekspor hook kustom yang memanggil useContext secara internal. Ini lebih rapi daripada mengekspos konteks secara langsung dan memungkinkan Anda menambahkan validasi.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Render Ulang Konteks
Saat nilai penyedia berubah, semua konsumen merender ulang. Jika nilainya berupa objek, referensi objek baru pada setiap render akan menyebabkan semua konsumen merender ulang. Memoisasikan nilai dengan useMemo untuk mencegahnya.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Kapan Menggunakan Konteks
Cocok untuk: tema, lokalitas, pengguna terautentikasi, penanda fitur, sistem notifikasi. Tidak ideal untuk: pembaruan berfrekuensi tinggi (setiap penekanan tombol), status kompleks berukuran besar (gunakan penyimpanan status sebagai gantinya).
Beberapa Konteks
Anda dapat memiliki beberapa konteks independen. Jagalah agar masing-masing tetap terfokus—AuthContext untuk autentikasi, ThemeContext untuk tema. Hindari satu konteks raksasa yang menampung semuanya.
Konteks vs Redux
Konteks tersedia secara bawaan dan memadai untuk data global yang jarang berubah. Redux/Zustand/Pinia lebih baik untuk status kompleks dengan banyak pembaruan, penelusuran kesalahan melalui perjalanan waktu, atau kebutuhan perangkat perantara.
Pola Konteks Autentikasi
Pola yang umum: AuthContext yang menyimpan pengguna saat ini dan metode autentikasi. Komponen yang menggunakannya memperoleh pengguna tanpa perlu meneruskan properti berantai.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Konteks dan TypeScript
Tentukan tipe konteks dengan antarmuka. Gunakan null sebagai nilai awal dan lemparkan kesalahan dalam hook kustom jika nilainya null. Ini mencegah status mustahil “digunakan di luar penyedia” terjadi secara diam-diam.
Kinerja: memo + Konteks
Komponen yang dibungkus dengan React.memo tidak merender ulang kecuali propertinya berubah. Jika keluaran konsumen konteks hanya bergantung pada sebagian konteks, pisahkan konteks tersebut atau gunakan pola pemilih untuk menghindari render ulang yang tidak perlu.
Pemeriksaan Cepat
Apa yang dikembalikan useContext(MyContext) ketika dipanggil di dalam komponen yang tidak memiliki penyedia di atasnya?
Rangkuman: useContext
createContext membuat konteks dengan nilai bawaan. Bungkus pohon komponen dengan penyedia untuk memasok nilai. useContext membaca nilai di mana pun di dalamnya. Hook kustom membungkus useContext untuk melakukan validasi. Memoisasikan nilai penyedia untuk mencegah render ulang yang tidak perlu. Gunakan untuk data global yang jarang berubah seperti tema dan autentikasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “useContext untuk State Global” gratis?
Ya — teks lengkap “useContext untuk State Global” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “useContext untuk State Global”?
Buat Context, bungkus subtree dengan Provider-nya, dan gunakan useContext untuk memakai nilainya agar state tema atau autentikasi dapat dibagikan tanpa meneruskan props berantai. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “useContext untuk State Global” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- useContext untuk State Global
- useReducer untuk State Kompleks
- useMemo dan useCallback untuk Performa
- Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali