Panduan Membuat Custom Hooks di React Agar Kode Lebih Bersih

Menyelamatkan Komponen yang Kegemukan

Saat membuat fitur pencarian data di React, kamu biasanya membutuhkan tiga *State*: data, isLoading, dan error. Lalu kamu menambah satu useEffect panjang untuk melakukan *Fetch API*.

Jika kamu menaruh semua logika itu di dalam komponen , ukuran file-mu akan membengkak. Lalu besoknya, kamu butuh fitur serupa di komponen , dan kamu me-*copy-paste* semua logika *Fetch* tadi. Ini melanggar prinsip DRY (Don't Repeat Yourself)! Solusinya adalah mengekstrak logika tersebut ke dalam Custom Hooks.

Apa itu Custom Hooks?

Custom Hooks pada dasarnya hanyalah sebuah fungsi JavaScript biasa. Namun, ada dua aturan ajaib yang harus ditaati:

1. Nama fungsinya WAJIB diawali dengan kata use (contoh: useFetchData, useTogge, useWindowSize).
2. Di dalam fungsi tersebut, kamu diizinkan untuk memanggil Hooks bawaan React yang lain (seperti useState dan useEffect).

Mari Buat Custom Hook Pertamamu: useFetch

Buat sebuah file baru bernama useFetch.js (berpisah dari komponen UI-mu).

import { useState, useEffect } from 'react';

// 1. Definisikan Custom Hook
export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(hasil => setData(hasil))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [url]);

  // 2. Kembalikan data yang dibutuhkan oleh UI
  return { data, loading, error };
}

Memanggilnya di Komponen UI

Kini, lihat betapa bersihnya komponen HTML (UI) milikmu! Komponenmu tidak lagi pusing memikirkan *fetch* atau *loading*. Ia murni hanya bertugas menggambar layar.

import { useFetch } from './useFetch';

export default function DaftarProduk() {
  // 3. Panggil Custom Hook-mu dalam satu baris kode!
  const { data, loading, error } = useFetch('https://api.toko.com/produk');

  if (loading) return <p>Memuat data...</p>;
  if (error) return <p>Terjadi kesalahan!</p>;

  return (
    <ul>
      {data.map(item => <li key={item.id}>{item.nama}</li>)}
    </ul>
  );
}

Kesimpulan

Custom Hooks adalah senjata andalan *Senior Developer* untuk memisahkan Logika Bisnis (State) dari Tampilan (UI/HTML). Semakin sering kamu membungkus logika berulangmu ke dalam fungsi useSesuatu(), aplikasimu akan semakin mudah dipelihara (*Maintainable*).