Mari kita lanjutkan dengan pembahasan tentang **State Management** menggunakan **Context API** di React. Context API adalah fitur built-in yang memungkinkan kita untuk mengelola dan berbagi state global di seluruh komponen dalam aplikasi React tanpa harus melewati props secara berlapis (prop drilling).
### Konsep Dasar Context API
1. **Context**: Objek yang dibuat menggunakan `React.createContext()`. Ini menyediakan penyimpanan untuk nilai yang ingin kita bagikan ke seluruh komponen dalam aplikasi.
2. **Provider**: Komponen yang membungkus bagian aplikasi yang memerlukan akses ke context. Provider menerima `value` prop yang akan menjadi nilai yang dibagikan.
3. **Consumer**: Komponen yang menggunakan context untuk mengakses nilai yang dibagikan. Namun, sejak React 16.8, kita lebih sering menggunakan hook `useContext` untuk mengakses nilai context.
### Menggunakan Context API untuk State Management
Mari kita lihat langkah-langkah dasar untuk menggunakan Context API:
#### 1. Membuat Context
Kita mulai dengan membuat konteks yang ingin kita gunakan. Misalnya, kita ingin mengelola state tema aplikasi (light/dark).
```jsx
import React, { createContext, useState } from 'react';
// Membuat Context
const ThemeContext = createContext();
#### 2. Membuat Provider
Kita perlu membuat komponen yang akan menjadi provider untuk context kita, di mana kita akan menyimpan dan mengelola state.
```jsx
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light'); // State tema
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
#### 3. Menggunakan Provider di Aplikasi
Kita perlu membungkus komponen kita dengan `ThemeProvider` sehingga semua komponen di dalamnya dapat mengakses nilai context.
```jsx
function App() {
return (
<ThemeProvider>
<MainComponent />
</ThemeProvider>
);
}
#### 4. Mengakses Context dalam Komponen
Kita bisa menggunakan hook `useContext` untuk mengakses nilai dari context dalam komponen.
```jsx
import React, { useContext } from 'react';
function MainComponent() {
const { theme, toggleTheme } = useContext(ThemeContext); // Mengakses nilai context
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<h1>Current Theme: {theme}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
### Contoh Lengkap
Berikut adalah contoh lengkap dari aplikasi yang menggunakan Context API untuk mengelola state tema:
```jsx
import React, { createContext, useState, useContext } from 'react';
// Membuat Context
const ThemeContext = createContext();
// Membuat Provider
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// Komponen utama
function MainComponent() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<h1>Current Theme: {theme}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
// Komponen Aplikasi
function App() {
return (
<ThemeProvider>
<MainComponent />
</ThemeProvider>
);
}
export default App;
### Kelebihan dan Kekurangan Context API
#### Kelebihan:
- **Menyederhanakan Prop Drilling**: Menghindari kebutuhan untuk meneruskan props ke banyak level.
- **Global State**: Mudah untuk membuat state global yang dapat diakses oleh banyak komponen tanpa kesulitan.
- **Built-in**: Tidak memerlukan pustaka eksternal, hanya menggunakan fitur React.
#### Kekurangan:
- **Re-rendering**: Jika context diubah, semua komponen yang menggunakannya akan di-render ulang, yang bisa menyebabkan masalah performa jika tidak dikelola dengan benar.
- **Kurang Fleksibel untuk State Management yang Rumit**: Untuk aplikasi yang lebih besar dan kompleks, solusi state management yang lebih robust seperti Redux atau MobX mungkin lebih sesuai.
### Ketika Menggunakan Context API
Context API sangat berguna ketika kita memiliki state yang perlu diakses oleh banyak komponen yang tidak berhubungan secara langsung dalam hierarki. Contohnya termasuk tema, data pengguna yang terautentikasi, atau preferensi pengguna.
### Kesimpulan
- **Context API** memungkinkan kita untuk berbagi state di seluruh aplikasi tanpa harus menggunakan prop drilling.
- Kita membuat **context**, **provider**, dan kemudian mengakses nilai dari context di dalam komponen menggunakan `useContext`.
- Context API ideal untuk state yang tidak terlalu kompleks dan digunakan di banyak bagian aplikasi.