Tutorial React Dasar Part 4: Cara Membuat Custom Hook Sendiri (useFetch)

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 4: Cara Membuat Custom Hook Sendiri (useFetch) | Pisahkan Logika dari Tampilan UI agar Kode Lebih Bersih & Rapi | Di Part 3 kemarin, kita sudah berhasil mengambil data dari REST API menggunakan kombinasi useState dan useEffect. Namun, bayangkan jika aplikasi web Anda memiliki 10 halaman berbeda (halaman profil, katalog produk, daftar artikel, dll) yang semuanya sama-sama membutuhkan pemanggilan API, state loading, dan penanganan error. Apakah kita harus meng-copy-paste 20 baris kode useEffect yang sama di setiap file komponen? Jawabannya tentu tidak. Di React, kita bisa membungkus logika stateful yang berulang menjadi sebuah fungsi sakti bernama Custom Hook. Kali ini admin akan membagikan panduan step-by-step membuat hook useFetch sendiri yang dijamin work 100%.

1. Apa Itu Custom Hook dan Mengapa Sangat Berguna?

Custom Hook adalah fungsi JavaScript biasa yang namanya diawali dengan kata use (misal: useFetch, useAuth, useLocalStorage) dan di dalamnya dapat memanggil hook bawaan React lainnya:

• Separation of Concerns: Memisahkan logika pemrosesan data murni dari komponen tampilan JSX, sehingga file UI Anda hanya fokus mengurus desain dan layout.
• Reusability Maksimal: Cukup buat 1 file logika custom hook, lalu panggil di puluhan komponen berbeda hanya dalam 1 baris kode.
• Maintainability: Jika di kemudian hari ingin menambahkan mekanisme header token otentikasi atau caching, kita cukup mengedit satu file custom hook tersebut.

Enkapsulasi logika fetching ke dalam custom hook useFetch.js dan pemakaian bersih di komponen UI

2. Membuat File Custom Hook (src/hooks/useFetch.js)

Buat folder baru src/hooks lalu buat file bernama useFetch.js:

// File: src/hooks/useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true; // Mencegah memory leak saat komponen di-unmount
    setLoading(true);

    fetch(url)
      .then((res) => {
        if (!res.ok) throw new Error('Gagal mengambil data jaringan!');
        return res.json();
      })
      .then((jsonData) => {
        if (isMounted) setData(jsonData);
      })
      .catch((err) => {
        if (isMounted) setError(err.message);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });

    return () => {
      isMounted = false; // Cleanup function
    };
  }, [url]);

  // Mengembalikan objek berisi data, loading, dan error
  return { data, loading, error };
}

3. Menggunakan Custom Hook di Komponen (src/App.jsx)

Sekarang perhatikan betapa bersih dan elegannya file src/App.jsx Anda saat memakai custom hook ini:

// File: src/App.jsx
import { useFetch } from './hooks/useFetch';

function App() {
  // Hanya butuh 1 baris untuk mengambil data apapun!
  const { data: posts, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts?_limit=4');

  if (loading) return <h2 style={{ textAlign: 'center', color: '#38bdf8' }}>⏳ Loading data...</h2>;
  if (error) return <h2 style={{ textAlign: 'center', color: '#ef4444' }}>⚠️ Terjadi Error: {error}</h2>;

  return (
    <div style={{ padding: '30px', backgroundColor: '#0f172a', minHeight: '100vh', fontFamily: 'Arial, sans-serif' }}>
      <h1 style={{ color: '#f8fafc', textAlign: 'center' }}>Daftar Artikel Blog (via useFetch)</h1>

      <div style={{ display: 'grid', gap: '15px', maxWidth: '700px', margin: '30px auto' }}>
        {posts && posts.map((post) => (
          <div key={post.id} style={{ backgroundColor: '#1e293b', padding: '18px', borderRadius: '8px', border: '1px solid #334155', color: '#cbd5e1' }}>
            <h3 style={{ margin: '0 0 8px 0', color: '#38bdf8', textTransform: 'capitalize' }}>{post.title}</h3>
            <p style={{ margin: '0', fontSize: '13px', lineHeight: '1.5' }}>{post.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

4. Aturan Baku Membuat Custom Hook

• Wajib Diawali Kata "use": Aturan linter resmi React mewajibkan penamaan diawali huruf kecil use agar React dapat memeriksa apakah aturan Hooks (seperti tidak boleh dipanggil di dalam if-statement atau perulangan) tetap ditaati.
• Setiap Komponen Mendapat State Terpisah: Memanggil useFetch di Komponen A dan Komponen B tidak akan membuat data mereka saling bertabrakan; setiap pemanggilan menciptakan instance state yang independen.

Itulah panduan praktis membuat Custom Hook di React. Saya sendiri selalu mengisolasi logika komunikasi API atau manajemen form ke dalam hooks khusus seperti ini agar kodingan komponen utama tetap bersih, modular, dan sangat mudah dirawat dalam jangka panjang.

Sekian tutorial kali ini, silahkan share artikel ini jika anda rasa bermanfaat untuk teman atau sahabat yang sedang mendalami arsitektur kode React modern.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik React Custom Hooks