## React Hooks Itu Apa? Bayangin functional component kayak superhero biasa. Nah, **Hooks itu superpowers** yang bikin superhero kamu bisa: - Punya memori (state) - Bereaksi sama perubahan (effects) - Berbagi info antar superhero (context) Hooks adalah fitur React yang bikin kamu bisa pake state dan lifecycle di functional components. Simpel, clean, dan powerful! ## Kenapa Hooks vs Class Components? Dulu kita harus pake class components buat pake state: ```typescript // Cara lama: Class Component (ribet!) class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); // Ribet bind this } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { return ; } } ``` Sekarang dengan Hooks: ```typescript // Cara baru: Functional Component dengan Hooks (simpel!) function Counter() { const [count, setCount] = useState(0); return ( ); } ``` **Kenapa Hooks lebih baik?** - Lebih sedikit code - Ga perlu ribet sama `this` - Lebih gampang reuse logic - Lebih gampang di-test Mari kita pelajari 3 hooks fundamental! ## 1. useState: Superpower Memori `useState` bikin component kamu punya memori. Seperti sticky note yang inget value. **Analogi:** Kayak kotak dengan tombol. Kotak isi value, tombol buat ganti value-nya. ```typescript import { useState } from 'react'; function ShoppingCart() { // [value, setValue] = useState(initialValue) const [items, setItems] = useState(0); return (

Keranjang: {items} barang

); } ``` ### Contoh Real-World: Form Login ```typescript function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); // Kirim ke API await login(email, password); setLoading(false); }; return ( ); } ``` **Poin Penting:** - State adalah data yang bisa berubah - Setiap kali state berubah, component re-render - Jangan mutate state langsung, selalu pake setter function ## 2. useEffect: Superpower Reaksi `useEffect` bikin component kamu bisa bereaksi sama perubahan. Kayak alarm yang bunyi pas kondisi tertentu terpenuhi. **Analogi:** Kayak sensor. Pas ada yang berubah, sensor trigger action tertentu. ```typescript import { useState, useEffect } from 'react'; function ProductPage({ productId }) { const [product, setProduct] = useState(null); const [loading, setLoading] = useState(true); // Effect: Fetch data pas component mount atau productId berubah useEffect(() => { setLoading(true); fetch(`/api/products/${productId}`) .then(res => res.json()) .then(data => { setProduct(data); setLoading(false); }); }, [productId]); // Dependency array: jalan lagi kalau productId berubah if (loading) return

; return

{product.name}

; } ``` ### Contoh Real-World: Auto-save ```typescript function NoteEditor() { const [note, setNote] = useState(''); // Auto-save setiap 2 detik setelah user berhenti ngetik useEffect(() => { const timer = setTimeout(() => { // Simpan ke server saveNoteToServer(note); console.log('Note saved!'); }, 2000); // Cleanup: Cancel timer kalau user ngetik lagi return () => clearTimeout(timer); }, [note]); // Jalan lagi setiap note berubah return (

setNote(e.target.value)}
   placeholder="Tulis catatan..."
  />
 );
}
```

**Poin Penting:**
- `useEffect` jalan setelah render
- Dependency array `[]` = jalan sekali pas mount
- Dependency array `[var]` = jalan pas var berubah
- Return function = cleanup (penting buat unsubscribe, cancel timers, dll)

## 3. useContext: Superpower Berbagi

`useContext` bikin kamu bisa share data ke banyak component tanpa props drilling.

**Analogi:** Kayak WiFi. Semua device bisa akses tanpa perlu kabel.

```typescript
import { createContext, useContext, useState } from 'react';

// 1. Bikin Context
const ThemeContext = createContext();

// 2. Provider Component
function App() {
 const [theme, setTheme] = useState('light');

return (
  <ThemeContext.Provider value={{ theme, setTheme }}>
   <Header />
   <Main />
   <Footer />
  </ThemeContext.Provider>
 );
}

// 3. Pake Context di component mana aja
function Header() {
 const { theme, setTheme } = useContext(ThemeContext);

return (
  <header className={theme}>
   <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
    Toggle Theme
   </button>
  </header>
 );
}

function Footer() {
 const { theme } = useContext(ThemeContext);
 return <footer className={theme}>Footer content</footer>;
}
```

### Contoh Real-World: User Authentication

```typescript
const AuthContext = createContext();

function AuthProvider({ children }) {
 const [user, setUser] = useState(null);
 const [loading, setLoading] = useState(true);

useEffect(() => {
  // Check user login status pas app load
  checkAuthStatus().then(userData => {
   setUser(userData);
   setLoading(false);
  });
 }, []);

const login = async (email, password) => {
  const userData = await loginAPI(email, password);
  setUser(userData);
 };

const logout = () => {
  logoutAPI();
  setUser(null);
 };

return (
  <AuthContext.Provider value={{ user, login, logout, loading }}>
   {children}
  </AuthContext.Provider>
 );
}

// Pake di component mana aja
function ProfilePage() {
 const { user, logout } = useContext(AuthContext);

if (!user) return <p>Please login</p>;

return (
  <div>
   <h1>Welcome, {user.name}!</h1>
   <button onClick={logout}>Logout</button>
  </div>
 );
}
```

**Poin Penting:**
- Context = global state tanpa props drilling
- Provider = component yang nyediain value
- Consumer = component yang pake value (via `useContext`)

## Kapan Pakai Hook Mana?

Bingung harus pake hook yang mana? Ini cheat sheet-nya:

| Situasi | Hook yang Dipake | Contoh |
|---------|------------------|--------|
| Butuh data yang bisa berubah | `useState` | Counter, form input, toggle |
| Fetch data dari API | `useEffect` + `useState` | Load user profile, products |
| Subscribe/unsubscribe | `useEffect` dengan cleanup | WebSocket, event listeners |
| Share data ke banyak component | `useContext` | Theme, auth, language |
| Update title page | `useEffect` | Document title update |
| Track window size | `useEffect` + `useState` | Responsive design |

**Aturan Praktis:**
- Mulai dengan `useState` buat local state
- Pake `useEffect` kalau ada side effects (fetch, subscribe, DOM manipulation)
- Pake `useContext` kalau props drilling jadi masalah

## Kesalahan Umum dan Cara Menghindarinya

### 1. Lupa Dependency Array di useEffect

```typescript
// Salah: Infinite loop!
useEffect(() => {
 setCount(count + 1); // Re-render → effect jalan → re-render → ...
}); // Ga ada dependency array

// Bener: Kasih dependencies
useEffect(() => {
 setCount(count + 1);
}, []); // Jalan sekali aja
```

### 2. Mutate State Langsung

```typescript
// Salah: Mutate langsung
const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Jangan!

// Bener: Bikin array baru
setItems([...items, 4]);
```

### 3. Conditional Hooks

```typescript
// Salah: Hook di dalam condition
if (user) {
 const [name, setName] = useState(''); // Error!
}

// Bener: Condition di dalam
const [name, setName] = useState('');
if (user) {
 // Pake name di sini
}
```

### 4. Lupa Cleanup di useEffect

```typescript
// Salah: Memory leak kalau ga cleanup
useEffect(() => {
 const interval = setInterval(() => {
  console.log('Tick');
 }, 1000);
 // Ga ada cleanup!
}, []);

// Bener: Selalu cleanup
useEffect(() => {
 const interval = setInterval(() => {
  console.log('Tick');
 }, 1000);

return () => clearInterval(interval); // Cleanup!
}, []);
```

### 5. State Updates yang Bergantung pada State Lama

```typescript
// Bahaya: Bisa dapet stale value
const increment = () => {
 setCount(count + 1);
 setCount(count + 1); // Masih pake count yang lama!
 // Hasilnya: count + 1, bukan count + 2
};

// Aman: Pake functional update
const increment = () => {
 setCount(prev => prev + 1);
 setCount(prev => prev + 1); // Pake prev yang udah updated
 // Hasilnya: count + 2
};
```

## Tips Pro

1. **Tetep sederhana** - Jangan overthink. useState cukup buat mayoritas kasus.

2. **Satu hook, satu tujuan** - Jangan bikin useEffect yang handle terlalu banyak hal.

3. **Custom hooks nanti aja** - Fokus fundamental dulu. Custom hooks belajar belakangan.

4. **DevTools itu temen kamu** - Install React DevTools buat debug hooks.

5. **ESLint plugin** - Install `eslint-plugin-react-hooks` buat catch mistakes.

## Kesimpulan

React Hooks bikin functional components jadi powerful tanpa kompleksitas class components.

**Checklist Belajar Hooks:**

- [ ] Paham analogi hooks sebagai superpowers
- [ ] Bisa bikin counter dengan `useState`
- [ ] Bisa fetch data dengan `useEffect`
- [ ] Bisa share data dengan `useContext`
- [ ] Tau kapan pake hook mana
- [ ] Paham kesalahan umum dan cara menghindarinya
- [ ] Bisa bikin form dengan multiple states
- [ ] Bisa implement auto-save dengan `useEffect`
- [ ] Paham dependency array dan cleanup
- [ ] Udah coba bikin mini project pake hooks

Langkah Selanjutnya:
1. Bikin todo app dengan hooks
2. Implement theme switcher dengan context
3. Bikin form dengan validation
4. Eksperimen dengan real API

Inget, hooks adalah fundamental modern React. Kuasain ini, dan kamu siap bikin app React yang clean dan maintainable!

Selamat ngoding!
</article></body></html>

Belajar React Hooks untuk Pemula