Memahami Custom Hooks di React

Halo! Kalau kamu sudah ngoding React lumayan lama, kamu pasti pernah ngerasa komponenmu makin lama makin… gendut. Paham kan maksud saya? Kebanyakan useState di sana-sini, useEffect numpuk, dan tiba-tiba logic komponenmu ruwet kayak benang kusut.

Saya juga pernah di posisi itu. Dulu waktu awal belajar, saya jejalkan semua logic ke dalam komponen. Tapi kemudian saya kenalan sama Custom Hooks, dan hidup jadi lebih tenang.

Masalah: Logic yang Berulang-ulang

Bayangin kamu punya dua komponen yang butuh ambil data dari API. Kemungkinan besar kamu bakal nulis logic useEffect yang sama persis di kedua komponen itu.

Biasanya kodingannya bakal kayak gini:

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  return <div>{data.name}</div>;
}

Liat logic fetching itu? Kalau kamu punya komponen lain buat ambil detail produk, kamu bakal copy-paste kode itu lagi. Gak asik banget kan?

Solusinya: Custom Hooks

Custom Hook itu sebenernya cuma fungsi JavaScript biasa yang namanya diawali dengan use dan bisa manggil Hooks lain di dalamnya. Itu doang. Gak ada sihir-sihiran.

Yuk kita keluarin logic tadi jadi hook useFetch.

import { useState, useEffect } from "react";

// Ini custom hook kita
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

Saya baru aja mindahin logic-nya keluar. Sekarang, coba liat komponen kita jadi kayak gimana.

function UserProfile({ userId }) {
  // Liat deh, jadi bersih banget kan!
  const { data, loading } = useFetch(`https://api.example.com/users/${userId}`);

  if (loading) return <p>Loading...</p>;
  return <div>{data?.name}</div>;
}

Kenapa Kamu Harus Pake Ini?

1. Reusability: Tulis sekali, pake di mana aja.
2. Readability: Komponenmu fokus ke UI (tampilan), bukan logic yang njelimet.
3. Testing: Kamu bisa tes hook-nya secara terpisah.

Kesimpulan

Awalnya Custom Hooks mungkin kedengeran serem, tapi sebenernya cuma fungsi kok. Mulai dari yang kecil aja. Lain kali kalau kamu liat ada logic yang duplikat atau useEffect yang kepanjangan, coba deh tarik keluar jadi hook.

Selamat ngoding!