**useState** adalah Hook yang digunakan untuk menambah **state** ke dalam functional components. Dengan `useState`, kita bisa membuat state lokal untuk komponen tersebut, yang dapat diakses dan diperbarui secara dinamis berdasarkan interaksi pengguna.
#### Sintaks:
```jsx
const [state, setState] = useState(initialState);
- `state`: Nilai state saat ini.
- `setState`: Fungsi untuk memperbarui state.
- `initialState`: Nilai awal untuk state tersebut.
#### Contoh penggunaan `useState`:
```jsx
import React, { useState } from 'react';
function Counter() {
// Inisialisasi state count dengan nilai awal 0
const [count, setCount] = useState(0);
return (
<div>
<p>Nilai count: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
}
Pada contoh di atas, `useState(0)` membuat state `count` dengan nilai awal 0, dan fungsi `setCount` digunakan untuk memperbarui nilai `count` setiap kali tombol diklik.
#### Catatan:
- **useState** dapat digunakan untuk menyimpan nilai apa pun, seperti string, objek, array, dll.
- Setiap kali state diperbarui, React akan merender ulang komponen dengan nilai state terbaru.
### 2. **useEffect**
**useEffect** adalah Hook yang digunakan untuk menangani **efek samping** dalam komponen, seperti fetching data dari API, mengatur timer, atau melakukan perubahan pada DOM secara manual. `useEffect` menggantikan lifecycle methods seperti `componentDidMount`, `componentDidUpdate`, dan `componentWillUnmount` dalam class components.
#### Sintaks:
```jsx
useEffect(() => {
// Kode efek samping di sini
return () => {
// Pembersihan (clean-up) efek samping jika diperlukan
};
}, [dependencies]);
- **Efek samping** dijalankan setelah render.
- **dependencies** adalah array yang menentukan kapan efek samping dijalankan ulang. Jika ada perubahan pada salah satu nilai di dalam array, efek samping akan dijalankan ulang. Jika array dibiarkan kosong (`[]`), efek hanya akan dijalankan sekali (seperti `componentDidMount`).
#### Contoh penggunaan `useEffect`:
```jsx
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
// Menambahkan efek samping yang dijalankan setelah komponen dirender
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
// Fungsi pembersihan: menghentikan interval saat komponen di-unmount
return () => clearInterval(timer);
}, []);
return (
<div>
<p>Timer: {count} detik</p>
</div>
);
}
Pada contoh di atas, efek dijalankan sekali setelah komponen dirender (karena array dependency kosong), dan menghentikan interval saat komponen di-unmount melalui fungsi pembersihan.
#### Hal-hal penting tentang `useEffect`:
- Bisa digunakan lebih dari sekali di dalam satu komponen.
- Dijalankan setelah render, bukan sebelum.
- Dapat digunakan untuk memecah logika kompleks menjadi beberapa efek yang lebih sederhana.
### 3. **useContext**
**useContext** adalah Hook yang memungkinkan komponen untuk mengakses **context** React tanpa harus melalui "prop drilling" (pengoperasian props dari komponen ke komponen lain secara berantai). **Context** memungkinkan data yang bersifat global, seperti tema atau data pengguna, untuk dibagikan di seluruh aplikasi tanpa harus mengoper props ke semua komponen yang membutuhkannya.
#### Cara kerja context:
1. Buat context menggunakan `React.createContext()`.
2. Gunakan `Context.Provider` untuk menyebarkan (provide) nilai context ke komponen yang memerlukan.
3. Gunakan `useContext` untuk mengakses nilai context di dalam komponen.
#### Contoh penggunaan `useContext`:
```jsx
import React, { useContext, useState } from 'react';
// Membuat context
const ThemeContext = React.createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
// Provider untuk membagikan nilai tema ke komponen anak
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
function ThemedComponent() {
// Mengakses nilai context dengan useContext
const { theme, setTheme } = useContext(ThemeContext);
return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
<p>Current theme: {theme}</p>
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Toggle Theme
</button>
</div>
);
}
function App() {
return (
<ThemeProvider>
<ThemedComponent />
</ThemeProvider>
);
}
Pada contoh di atas:
- **ThemeContext** dibuat menggunakan `React.createContext()`.
- `ThemeProvider` adalah komponen yang menggunakan **Context.Provider** untuk menyediakan nilai `theme` dan fungsi `setTheme` kepada komponen anak.
- Komponen **ThemedComponent** mengakses nilai context menggunakan `useContext(ThemeContext)`.
#### Kapan menggunakan useContext?
- Ketika ada data global yang dibutuhkan oleh banyak komponen.
- Untuk menghindari "prop drilling" — operan props yang berlapis-lapis melalui beberapa komponen hanya untuk mencapai komponen anak yang membutuhkannya.
### Kesimpulan
- **useState**: Digunakan untuk menambah state lokal pada functional components dan memperbarui UI berdasarkan perubahan state.
- **useEffect**: Digunakan untuk menangani efek samping seperti fetching data atau mengatur timer, serta memungkinkan pembersihan efek.
- **useContext**: Memungkinkan komponen untuk mengakses dan menggunakan context tanpa harus mengoper props melalui banyak lapisan komponen.
Hooks membuat pengelolaan state dan efek dalam functional components lebih mudah dan efisien, menggantikan kebutuhan akan class components dalam banyak kasus.