Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali
Pindahkan logika yang menyimpan state ke fungsi khusus use* untuk berbagi perilaku antar-komponen tanpa menduplikasi kode atau mengangkat state.
Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Apa Itu Hook Kustom
Hook kustom adalah fungsi JavaScript yang namanya dimulai dengan use dan memanggil hook lain secara internal. Hook kustom memungkinkan Anda mengekstrak logika yang bergantung pada status agar dapat digunakan oleh beberapa komponen tanpa menyalin dan menempelkan kode.
Mengekstrak Logika ke Hook Kustom
Identifikasi logika yang diduplikasi di berbagai komponen (pengambilan data + pemuatan + kesalahan, ukuran jendela, penyimpanan lokal), lalu pindahkan ke hook kustom.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return width;
}
// Usage:
const width = useWindowWidth();
const isMobile = width < 768;useFetch — Hook Pengambilan Data
Hook pengambilan data yang dapat digunakan kembali oleh komponen mana pun untuk memuat data dari sebuah URL.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(url, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setData(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError')
setError((err as Error).message);
} finally { setLoading(false); }
}
load();
return () => controller.abort();
}, [url]);
return { data, loading, error };
}Hook useLocalStorage
Hook kustom yang menyinkronkan nilai ke localStorage dan tetap tersinkron di berbagai tab melalui peristiwa penyimpanan.
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const set = useCallback((newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
}, [key]);
return [value, set] as const;
}Hook Kustom Berbagi Logika, Bukan Status
Setiap komponen yang memanggil hook kustom mendapatkan status independennya sendiri. Hook bukan instans tunggal—hook adalah pemanggilan fungsi yang membuat instans status terisolasi.
Konvensi Penamaan
Nama hook kustom harus dimulai dengan use. Hal ini diberlakukan oleh aturan linting react-hooks milik ESLint, yang memastikan hook dipanggil pada tingkat teratas dan dalam urutan yang benar.
Mengembalikan Beberapa Nilai
Hook kustom biasanya mengembalikan objek (nilai bernama) atau tuple (seperti useState). Tuple memungkinkan destrukturisasi dengan nama kustom; objek menjelaskan dirinya sendiri.
// Tuple (like useState):
const [value, setValue] = useLocalStorage('key', 0);
// Object (more descriptive):
const { data, loading, error, refetch } = useFetch('/api/users');Hook useDebounce
Tunda pembaruan nilai: perbarui hanya setelah pengguna berhenti mengetik selama jeda yang ditentukan.
function useDebounce<T>(value: T, delay: number): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
// Usage:
const debouncedSearch = useDebounce(searchTerm, 300);
useEffect(() => { search(debouncedSearch); }, [debouncedSearch]);Hook useMediaQuery
Membungkus window.matchMedia dalam hook untuk membaca hasil kueri media CSS secara reaktif.
function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const mq = window.matchMedia(query);
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [query]);
return matches;
}Menguji Hook Kustom
Gunakan utilitas @testing-library/react renderHook() untuk menguji hook kustom secara terisolasi tanpa membungkusnya dalam komponen.
import { renderHook, act } from '@testing-library/react';
test('useCounter increments', () => {
const { result } = renderHook(() => useCounter(0));
expect(result.current.count).toBe(0);
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});Pustaka Hook Siap Pakai
Pustaka hook komunitas menyediakan ratusan hook yang telah diuji: @uidotdev/usehooks, react-use, usehooks-ts. Sebelum menulis hook kustom, periksa apakah versi yang telah diuji dengan baik sudah tersedia.
Pemeriksaan Cepat
Apa yang terjadi pada status di dalam hook kustom ketika hook tersebut dipanggil oleh dua komponen yang berbeda?
Rangkuman: Hook Kustom
Hook kustom mengekstrak logika yang bergantung pada status agar dapat digunakan kembali. Beri nama dengan awalan use. Setiap komponen yang memanggil hook mendapatkan status independen. Kembalikan objek atau tuple. Pola umum: useFetch, useLocalStorage, useDebounce, useMediaQuery. Uji dengan renderHook(). Periksa pustaka komunitas sebelum menulis dari awal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali” gratis?
Ya — teks lengkap “Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali” 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 “Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali”?
Pindahkan logika yang menyimpan state ke fungsi khusus use* untuk berbagi perilaku antar-komponen tanpa menduplikasi kode atau mengangkat state. 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 4 dari 4.
Berapa lama pelajaran “Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali” 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