Custom Hooks: Membagikan Logika

Masalah: logika yang berulang

Bayangkan tiga komponen berbeda yang masing-masing butuh "buka/tutup" (modal, dropdown, accordion). Menyalin useState + fungsi toggle di setiap tempat membuat kode berulang.

Custom hook

Custom hook adalah function biasa yang namanya diawali use dan memanggil hook lain di dalamnya. Ia membungkus logika stateful agar bisa dipakai ulang:

function useToggle(awal = false) {
  const [nilai, setNilai] = useState(awal);
  const toggle = () => setNilai((n) => !n);
  return [nilai, toggle];
}

Pemakaian:

function Modal() {
  const [buka, toggleBuka] = useToggle();
  return (
    <div>
      <button onClick={toggleBuka}>{buka ? "Tutup" : "Buka"}</button>
      {buka && <div className="isi">Isi modal</div>}
    </div>
  );
}

Penting: logika dibagi, state TIDAK dibagi

Setiap komponen yang memanggil useToggle() mendapat state-nya sendiri. Hook hanya membagikan cara mengelola state, bukan state-nya. (Untuk berbagi state, gunakan induk/Context.)

Contoh hook yang umum

// membaca/menulis localStorage
function useLocalStorage(kunci, awal) {
  const [nilai, setNilai] = useState(() => {
    const tersimpan = localStorage.getItem(kunci);
    return tersimpan ? JSON.parse(tersimpan) : awal;
  });
  useEffect(() => {
    localStorage.setItem(kunci, JSON.stringify(nilai));
  }, [kunci, nilai]);
  return [nilai, setNilai];
}

// ukuran jendela
function useUkuranJendela() {
  const [lebar, setLebar] = useState(window.innerWidth);
  useEffect(() => {
    const h = () => setLebar(window.innerWidth);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);
  return lebar;
}

Perhatikan initializer function pada useState(() => ...): dijalankan sekali saja, cocok untuk perhitungan mahal.

Aturan

• Nama harus diawali use agar linter dan React mengenalinya sebagai hook.
• Ikuti aturan hooks: panggil di tingkat atas, bukan di kondisi atau loop.
• Mengembalikan array (seperti useState) bila pemakai perlu menamai ulang, atau object bila banyak nilai.

Kapan membuat custom hook?

Saat kamu menyalin pola useState + useEffect yang sama di beberapa komponen, atau ketika logika membuat komponen sulit dibaca. Beri nama yang menjelaskan tujuannya (useOnlineStatus), bukan implementasinya.

Ekosistem

Banyak hook siap pakai: usehooks-ts, react-use, serta hooks dari library (React Router useNavigate, TanStack Query useQuery).