React Özel Hook'ları: Kendi Hook'unu Yazmak, Örneklerle

Özel hook (custom hook), adı use ile başlayan ve başka hook'ları çağıran bir fonksiyondur. İki bileşenin aynı state'li mantığa ihtiyacı olduğunda bir tane yazarsın: useState ve useEffect çağrılarını fonksiyona taşı, bileşenin ihtiyaç duyduğunu döndür ve her bileşenden onu çağır.

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>
    );
}

İki spoiler da useToggle'ı çağırır ve birini açmak diğerini kapalı bırakır. Her çağrı kendi useState'ini çalıştırır, bu yüzden her bileşen kendi değerini alır. Özel bir hook state'i değil, mantığı paylaşır.

Bir tane yazmanın kuralları

• Ad use ve bir büyük harfle başlar: useToggle, useOnlineStatus. Hook'lar için lint kuralı, hook çağrılarını bulup kontrol etmek için öneki kullanır.
• En az bir hook çağırır. Hiç hook çağırmayan bir yardımcı sıradan bir fonksiyondur; ona useFormatDate değil formatDate adını ver, böylece koşulların içi dahil her yerde çağrılabilir.
• Hook kurallarına uyar: hook'ları kendi en üst düzeyinde çağır ve onu yalnızca bileşenlerden ya da başka özel hook'lardan çağır.
• İşe yarayan her şeyi döndürür. Bir dizi ([on, toggle]) çağıranlar değerleri yeniden adlandırdığında kullanışlıdır; bir nesne ({ data, loading, error }) üç ya da daha fazlası için daha iyi okunur.

useLocalStorage: yeniden yüklemeden sağ çıkan state

useState yeniden yüklemede her şeyi unutur. Bu hook başlangıç değerini localStorage'dan okur ve her değişikliği geri yazar.

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>
    );
}

Önizleme, tarayıcının localStorage'ı engellediği izole bir çerçevede çalışır, bu yüzden burada Console'da uyarıyı görürsün ve hook düz state'e geri döner. Normal bir sayfada ad yeniden yüklemeden sağ çıkar. try/catch yalnızca bu önizleme için değil: gizli tarama modları, engellenmiş çerezler ve dolu bir kota, gerçek uygulamalarda da depolamanın hata fırlatmasına yol açar. useState'e bir fonksiyon aktarmak depolamanın bir kez, ilk render'da okunması demektir.

useDebounce: kullanıcı yazmayı bırakana kadar bekle

Bir arama kutusu her tuş vuruşunda istek göndermemelidir. useDebounce, belirli bir gecikme boyunca değişmeyi bıraktıktan sonra güncellenen bir değer kopyası döndürür.

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>
    );
}

Hızlıca bir sözcük yaz: Typed her tuşu takip eder, Debounced sen durduktan yarım saniye sonra yetişir ve Console bir arama kaydeder. Her tuş vuruşu value'yu değiştirir, bu yüzden React yeni bir zamanlayıcı başlatmadan önce temizlemeyi (clearTimeout) çalıştırır. 500'ü 0 yap; her tuş vuruşu kendi aramasını kaydeder.

useWindowWidth: temizlemeyle abone olmak

Tarayıcıyı dinleyen bir hook, bileşen gittiğinde dinleyicisini kaldırmalıdır; yoksa her mount arkasında bir tane bırakır.

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>
    );
}

Tarayıcı penceresini yeniden boyutlandır; sayı takip eder. Düğmeye tıkla; Console dinleyicinin kaldırıldığını gösterir. Efektten return'ü sil, sonra birkaç kez mount ve unmount et: her seferinde bir added satırı alırsın ve hiç removed yoktur, yani eski dinleyiciler birikir. Bunun gibi tarayıcı değerleri için useSyncExternalStore, React'in bu iş için yaptığı hook'tur ve bir özel hook'un içinde çağrılması iyi bir şeydir.

Mantık paylaşılır, state paylaşılmaz

Aynı hook'u çağıran iki bileşen, içindeki her şeyin iki ayrı kopyasını alır. Bu, bir hook'un global bir değişken gibi çalışmasını bekleyenleri şaşırtır.

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>
    );
}

Herhangi bir düğmeye tıkla; yalnızca o sayaç ilerler. İkisinin de aynı sayıyı göstermesi gerekiyorsa state'i App'e taşı ve aşağı aktar ya da bir context'e koy. Bir özel hook kolaylık için bu paylaşılan state'i sarabilir (bir CartContext'i okuyan useCart()), ama paylaşım hook'tan değil context'ten gelir.

Ne zaman özel hook yazılmalı

Aynı hook çağrıları grubu iki bileşende göründüğünde ya da bir bileşenin efekt mantığı bir adın onu daha iyi açıklayacağı kadar uzun olduğunda bir hook çıkar (useOnlineStatus(), yirmi satır dinleyiciden daha iyi okunur). Tek bir useState çağrısını sadece yeniden adlandırmak için bir hook'a sarma ve props'tan state ayarlamak için yalnızca useEffect çağıran hook'lar yazma; bunun yerine o değeri render sırasında hesapla.