1. Mengapa Kita Butuh Custom Hooks?
Ketika beberapa komponen membutuhkan logika stateful yang sama (misal: mengambil data dari API, sinkronisasi ke `localStorage`, atau mendeteksi ukuran layar), daripada menyalin-tempel `useState` dan `useEffect` di setiap komponen, kita mengekstrak logika tersebut ke dalam **Custom Hook** (fungsi yang diawali kata `use`).
2. Contoh Nyata: Custom Hook useLocalStorage
example.js
javascript
| 1 | import { useState, useEffect } from 'react'; |
| 2 | |
| 3 | export function useLocalStorage(key, initialValue) { |
| 4 | const [value, setValue] = useState(() => { |
| 5 | try { |
| 6 | const item = localStorage.getItem(key); |
| 7 | return item ? JSON.parse(item) : initialValue; |
| 8 | } catch (e) { |
| 9 | return initialValue; |
| 10 | } |
| 11 | }); |
| 12 | |
| 13 | useEffect(() => { |
| 14 | try { |
| 15 | localStorage.setItem(key, JSON.stringify(value)); |
| 16 | } catch (e) { |
| 17 | console.error(e); |
| 18 | } |
| 19 | }, [key, value]); |
| 20 | |
| 21 | return [value, setValue]; |
| 22 | } |
| 23 | |
| 24 | // Cara penggunaannya sangat bersih mirip useState biasa: |
| 25 | function ThemeToggle() { |
| 26 | const [theme, setTheme] = useLocalStorage('app_theme', 'light'); |
| 27 | return ( |
| 28 | <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> |
| 29 | Tema: {theme} |
| 30 | </button> |
| 31 | ); |
| 32 | } |