Custom Hook React: Cara Membuat Sendiri, dengan Contoh

Custom hook adalah fungsi yang namanya diawali use dan memanggil hook lain. Kamu menulisnya saat dua komponen butuh logika yang sama yang punya state: pindahkan pemanggilan useState dan useEffect ke dalam fungsi itu, kembalikan apa yang dibutuhkan komponen, lalu panggil dari setiap komponen.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

Kedua spoiler memanggil useToggle, dan membuka yang satu tidak membuka yang lain. Setiap pemanggilan menjalankan useState miliknya sendiri, jadi setiap komponen mendapat nilainya sendiri. Custom hook berbagi logika, bukan state.

Aturan untuk menulisnya

• Namanya diawali use dan huruf kapital: useToggle, useOnlineStatus. Aturan lint untuk hook memakai awalan ini untuk menemukan pemanggilan hook dan memeriksanya.
• Ia memanggil setidaknya satu hook. Helper yang tidak memanggil hook apa pun adalah fungsi biasa; beri nama formatDate, bukan useFormatDate, agar bisa dipanggil di mana saja, termasuk di dalam kondisi.
• Ia mengikuti aturan hook: panggil hook di level teratasnya, dan panggil custom hook itu hanya dari komponen atau custom hook lain.
• Ia mengembalikan apa pun yang berguna. Array ([on, toggle]) praktis saat pemanggil ingin mengganti nama nilainya; objek ({ data, loading, error }) lebih mudah dibaca untuk tiga nilai atau lebih.

useLocalStorage: state yang bertahan setelah reload

useState melupakan semuanya saat halaman dimuat ulang. Hook ini membaca nilai awal dari localStorage dan menulis setiap perubahan kembali ke sana.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

Pratinjau berjalan di frame sandbox tempat browser memblokir localStorage, jadi di sini kamu akan melihat peringatan di Konsol dan hook-nya kembali memakai state biasa. Di halaman normal, namanya tetap ada setelah reload. try/catch itu bukan hanya untuk pratinjau ini: mode private browsing, cookie yang diblokir, dan kuota yang penuh juga membuat storage melempar error di aplikasi sungguhan. Mengirim fungsi ke useState berarti storage hanya dibaca sekali, di render pertama.

useDebounce: tunggu sampai pengguna berhenti mengetik

Kotak pencarian sebaiknya tidak mengirim request di setiap ketukan tombol. useDebounce mengembalikan salinan sebuah nilai yang baru diperbarui setelah nilai itu berhenti berubah selama jeda tertentu.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

Ketik sebuah kata dengan cepat: Typed mengikuti setiap tombol, Debounced menyusul setengah detik setelah kamu berhenti, dan Konsol mencatat satu pencarian. Setiap ketukan tombol mengubah value, jadi React menjalankan cleanup (clearTimeout) sebelum memulai timer baru. Ganti 500 menjadi 0, dan setiap ketukan tombol mencatat pencariannya sendiri.

useWindowWidth: subscribe dengan cleanup

Hook yang mendengarkan browser harus menghapus listener-nya saat komponen hilang, atau setiap mount akan meninggalkan satu listener.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

Ubah ukuran jendela browser, dan angkanya ikut berubah. Klik tombolnya, dan Konsol menunjukkan listener sedang dihapus. Hapus return dari effect, lalu lakukan mount dan unmount beberapa kali: kamu mendapat baris added setiap kali tanpa removed, jadi listener lama menumpuk. Untuk nilai dari browser seperti ini, useSyncExternalStore adalah hook yang dibuat React khusus untuk tugas itu, dan cocok dipanggil di dalam custom hook.

Logika dibagi, state tidak

Dua komponen yang memanggil hook yang sama mendapat dua salinan terpisah dari semua isinya. Ini mengejutkan orang yang mengira hook bekerja seperti variabel global.

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

Klik salah satu tombol, dan hanya counter itu yang bergerak. Jika keduanya harus menampilkan angka yang sama, pindahkan state ke App dan kirim ke bawah, atau taruh di context. Custom hook bisa membungkus state bersama itu agar praktis (useCart() yang membaca CartContext), tetapi kemampuan berbaginya berasal dari context, bukan dari hook.

Kapan menulis custom hook

Ekstrak sebuah hook saat kelompok pemanggilan hook yang sama muncul di dua komponen, atau saat logika effect di satu komponen cukup panjang sehingga sebuah nama akan menjelaskannya lebih baik (useOnlineStatus() lebih mudah dibaca daripada dua puluh baris listener). Jangan membungkus satu pemanggilan useState dengan hook hanya untuk mengganti namanya, dan jangan menulis hook yang hanya memanggil useEffect untuk mengatur state dari props; hitung nilai itu saat render saja.