react custom hook

📚 Seri Belajar React · Artikel 12 dari 16

Custom Hook: Bikin Sendiri Hook-mu
Biar Kode Lebih Rapi & Reusable

Udah capek copy-paste logika yang sama ke banyak komponen? Saatnya kamu kenalan sama custom hook React — senjata rahasia developer senior buat kode yang lebih bersih dan reusable.

#CustomHook #ReusableLogic #ReactHooks #BelajarReact #ZeroToZorro

⏱️

Estimasi Baca

9 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

Pernah nggak kamu nulis logika useState + useEffect untuk fetch data, terus kamu nulis hal yang sama persis di komponen lain? Rasanya kayak déjà vu yang menyebalkan — copy, paste, ganti nama variabel, selesai. Padahal ada cara yang jauh lebih elegan: custom hook React reusable logic. Dengan custom hook, logika yang sering kamu pakai bisa dikemas jadi satu fungsi yang bisa dipanggil di mana saja. Artikel ini adalah bagian dari Seri Belajar React: React From Zero to Zorro, dan di sini kamu akan belajar cara membuat custom hook dari nol sampai siap dipakai di proyek nyata.

Apa Itu Custom Hook dan Kenapa Kamu Butuh custom hook React?

Bayangkan kamu punya pisau Swiss Army — satu alat yang punya banyak fungsi. Custom hook itu persis kayak gitu: satu fungsi yang membungkus logika React (state, effect, ref, dll.) supaya bisa dipakai ulang di banyak komponen tanpa harus ditulis berulang.

Secara teknis, custom hook adalah fungsi JavaScript biasa yang namanya diawali dengan kata use — misalnya useFetch, useWindowSize, atau useLocalStorage. Di dalamnya, kamu bebas pakai hook bawaan React seperti useState dan useEffect.

⚙️

📐 Definisi Kunci

Custom Hook adalah fungsi JavaScript yang diawali use, berisi logika stateful React, dan dapat digunakan kembali di berbagai komponen tanpa mengulang kode. Ini adalah implementasi prinsip DRY (Don't Repeat Yourself) yang paling elegan di ekosistem React.

🔥

Fakta Menarik

Library React populer seperti react-use dan ahooks sepenuhnya dibuat dari custom hook. Artinya, skill yang kamu pelajari hari ini adalah fondasi dari ribuan library open-source di luar sana!

Cara Membuat Custom Hook React Reusable Logic dari Nol

Oke, teori cukup. Sekarang kita langsung hands-on. Kita akan bikin dua custom hook yang sering banget dibutuhkan di proyek nyata: useFetch untuk fetching data, dan useLocalStorage untuk menyimpan data ke browser storage. Ikuti langkah-langkahnya!

1

Identifikasi logika yang berulang

Perhatikan komponen-komponen di proyekmu. Kalau kamu melihat pola yang sama muncul lebih dari sekali, itu sinyal kuat bahwa saatnya bikin custom hook. Contohnya: logika fetch API yang muncul di UserList, ProductList, dan OrderList.

2

Buat file baru dengan nama diawali use

Konvensinya, simpan custom hook di folder src/hooks/. Buat file bernama useFetch.js.

3

Tulis logika hook-mu

Pindahkan logika berulang tadi ke dalam fungsi custom hook. Berikut implementasi useFetch yang siap pakai:

📄 src/hooks/useFetch.js custom hook · reusable

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Reset state setiap URL berubah
    setLoading(true);
    setError(null);

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

  return { data, loading, error };
}

export default useFetch;

4

Gunakan hook-mu di komponen

Sekarang komponen jadi super bersih! Cukup satu baris untuk dapetin semua state yang dibutuhkan:

📄 UserList.jsx menggunakan useFetch

import useFetch from '../hooks/useFetch';

function UserList() {
  const { data, loading, error } = useFetch(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (loading) return <p>Memuat data...</p>;
  if (error)   return <p>Error: {error}</p>;

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

export default UserList;

💡

Tips Praktis

Awali nama custom hook dengan use bukan hanya konvensi, tapi aturan wajib. React menggunakan prefix ini untuk menjamin aturan hooks dipatuhi (misalnya, tidak dipanggil di luar komponen atau hook lain).

Contoh Custom Hook React Reusable Logic: useLocalStorage

Satu lagi contoh custom hook yang sangat berguna di kehidupan nyata — menyimpan dan membaca data dari localStorage. Tanpa custom hook, kamu harus tulis JSON.parse dan JSON.stringify terus-terusan. Ngebosenin? Banget. Sekarang kita bungkus jadi hook sekali, pakai selamanya.

📄 src/hooks/useLocalStorage.js persistent state

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Kalau error, pakai nilai awal
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

Dan cara pakainya? Persis seperti useState biasa — hanya tinggal tambahkan nama key-nya:

📄 ThemeToggle.jsx

import useLocalStorage from '../hooks/useLocalStorage';

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Mode sekarang: {theme} 🌓
    </button>
  );
}
// Theme akan tersimpan walau browser di-refresh! ✨

⚡

Insight Penting

Custom hook tidak berbagi state antar komponen yang menggunakannya. Setiap komponen yang memanggil useFetch mendapatkan state-nya sendiri yang independen. Ini beda dengan Context API atau state management global.

Aturan Emas dan Best Practice Custom Hook React

🔍 Perbandingan: Dengan vs Tanpa Custom Hook

❌ Tanpa Custom Hook

• Logika duplikat di banyak komponen
• Susah di-test secara terpisah
• Kode sulit dibaca & maintain
• Bug harus diperbaiki di banyak tempat

✅ Dengan Custom Hook

• Satu definisi, dipakai di mana saja
• Mudah di-unit test secara terisolasi
• Komponen jadi fokus ke tampilan saja
• Bug cukup diperbaiki di satu tempat

Custom Hook	Kegunaan	Kompleksitas
useFetch	Fetching data dari API	Mudah
useLocalStorage	State yang persist di browser	Mudah
useWindowSize	Deteksi ukuran layar real-time	Menengah
useDebounce	Delay eksekusi (misal: search)	Menengah
useAuth	Manajemen sesi autentikasi	Lanjutan

⚠️

Perhatian!

Custom hook tetap harus mengikuti Rules of Hooks: hanya boleh dipanggil di level teratas fungsi komponen atau hook lain — jangan dipanggil di dalam kondisi (if), loop (for), atau nested function.

💡

Tips: Struktur Folder yang Rapi

Simpan semua custom hook di src/hooks/ dan ekspor dari satu file index.js supaya impor lebih bersih:

import { useFetch, useLocalStorage } from '../hooks';

📚

Bagian dari

Seri Belajar React: React From Zero to Zorro

Artikel ini adalah bagian ke-12 dari 16 artikel dalam seri lengkap belajar React dari nol. Akses daftar isi lengkap dan semua artikel di sini:

🗺️ Lihat Daftar Isi Lengkap Seri

🎯 Kesimpulan

Custom Hook: Satu Kali Tulis, Selamanya Pakai

Hari ini kamu sudah belajar bahwa custom hook React reusable logic bukan sekadar fitur keren — ini adalah cara berpikir yang akan mengubah cara kamu menulis React selamanya. Rangkuman poin utamanya:

• Custom hook adalah fungsi JS biasa berawalan use yang bungkus logika React
• Cocok untuk logika yang muncul berulang di banyak komponen
• Setiap komponen yang pakai hook mendapat state-nya sendiri yang independen
• Simpan di src/hooks/ dan ekspor dari index.js
• Tetap patuhi Rules of Hooks — jangan panggil di dalam kondisi atau loop

Bagaimana pengalamanmu pertama kali bikin custom hook? Kamu bikin hook untuk apa? Ceritakan di kolom komentar di bawah — dan kalau artikel ini bermanfaat, share ke teman-temanmu yang lagi belajar React ya! 🚀

📚 Lihat Seri Lengkap 💬 Tulis Komentar

🏷️ Topik Artikel

#BelajarReact #ZeroToZorro #CustomHook #ReusableLogic #ReactHooks #useFetch #useLocalStorage #JavaScript

📖 Navigasi Seri

← Artikel Sebelumnya

React Makin Cepat: Optimasi Performa dengan useMemo, useCallback, dan React.memo

← Baca Artikel

Artikel Selanjutnya →

Manajemen State Skala Besar: Praktikum Zustand atau Redux Toolkit di React

Baca Artikel →