Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang sudah paham dasar React dan siap masuk logic level aplikasi nyata
• Pemula yang sering bingung kenapa useEffect “jalan sendiri”
• Siapa pun yang pernah lihat request dobel, nilai stale, atau rerender aneh

Apa yang akan Anda pelajari

• Pola useState yang lebih aman untuk update object/array
• Penggunaan useEffect yang benar + cara mikir dependency
• Cara ekstrak logika berulang ke custom hook secara rapi

Mengapa topik ini penting

Banyak bug React di production datang dari side effects, bukan dari JSX. Proses fetch data, timer, subscription, dan sinkronisasi browser API semuanya ada di area ini.

Kalau hooks dipakai dengan benar, aplikasi jadi prediktif. Kalau salah, Anda ketemu bug klasik: API kepanggil berulang, data stale, dan state yang susah dilacak.

Konsep inti

Pola useState

• Update turunan dan update object/array
• Hindari stale closure

Pakai functional update (setState(prev => ...)) kalau nilai baru bergantung pada state sebelumnya.

useEffect

• Berjalan setelah render
• Dependency array mengatur kapan effect dijalankan

Mental model cepat:

• Tanpa dependency array -> jalan setiap render
• Array kosong ([]) -> jalan sekali saat mount
• Dengan dependency -> jalan saat dependency berubah

Custom hooks

• Ekstrak logika state/effect berulang
• Mempermudah reuse dan keterbacaan

Custom hook bukan sihir. Ini cuma fungsi untuk “membungkus” logic hooks yang berulang.

Panduan langkah demi langkah

Langkah 1 — Tambahkan effect berbasis data

Mulai dari satu fetch saat mount + satu loading state yang jelas.

Langkah 2 — Kelola dependency dengan tepat

Audit dependency secara sengaja. Masukkan yang benar-benar dipakai effect.

Langkah 3 — Ekstrak ke custom hook

Pindahkan logic fetch + loading + error yang berulang ke custom hook seperti useItems.

Target bab ini: side effects jadi bisa diprediksi, bukan bikin kejutan.

Contoh praktis

Contoh 1 — Effect dengan fetch

useEffect(() => {
  let active = true;
  async function run() {
    const response = await fetch("/api/items");
    const data = await response.json();
    if (active) setItems(data);
  }
  run();
  return () => {
    active = false;
  };
}, []);

Kenapa ini penting:

• Guard cleanup membantu mencegah update state dari respons async yang sudah usang.

Contoh 2 — Skeleton custom hook

function useToggle(initial = false) {
	const [value, setValue] = useState(initial);
	const toggle = () => setValue((prev) => !prev);
	return { value, toggle };
}

Real case:

• Hook seperti ini sangat membantu mengurangi boilerplate di komponen kontrol UI.

Kesalahan umum dan cara menghindarinya

• Dependency useEffect tidak lengkap -> data stale dan perilaku tidak konsisten
• Satu effect memegang terlalu banyak tugas -> pecah per tanggung jawab
• Logic fetch diulang di banyak komponen -> ekstrak custom hook
• Race condition di flow search/fetch -> abaikan respons usang atau cancel request lama

Mini Project

• Buat live search app dengan:
• debounced input,
• loading state berbasis request,
• fallback error,
• perlindungan dari stale response.

Bonus:

• Pindahkan logic fetch ke custom hook useSearch.

Latihan cepat

• Tambahkan loading dan error state pada fetch
• Implementasi debounce input sebelum request
• Pindahkan logika request ke custom hook
• Jelaskan dalam satu kalimat: kapan satu effect sebaiknya dipecah jadi dua effect?

Ringkasan utama

• Hooks jadi kuat kalau logikanya eksplisit dan scoped dengan benar
• useEffect dipakai untuk sinkronisasi, bukan tempat “buang semua side effect”
• Custom hooks meningkatkan reuse dan menjaga komponen tetap fokus

Langkah berikutnya

Lanjut ke [11. Form dan Validasi di React].