Własne hooki w React: jak je pisać, z przykładami

Własny hook to funkcja, której nazwa zaczyna się od use i która wywołuje inne hooki. Piszesz go, gdy dwa komponenty potrzebują tej samej logiki ze stanem: przenieś wywołania useState i useEffect do funkcji, zwróć to, czego potrzebuje komponent, i wywołaj ją z każdego komponentu.

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

Oba spoilery wywołują useToggle, a otwarcie jednego zostawia drugi zamknięty. Każde wywołanie wykonuje własne useState, więc każdy komponent dostaje własną wartość. Własny hook współdzieli logikę, a nie stan.

Zasady pisania własnego hooka

• Nazwa zaczyna się od use i wielkiej litery: useToggle, useOnlineStatus. Reguła lintera dla hooków używa tego przedrostka, żeby znaleźć wywołania hooków i je sprawdzić.
• Wywołuje co najmniej jeden hook. Pomocnik, który nie wywołuje żadnych hooków, to zwykła funkcja; nazwij go formatDate, a nie useFormatDate, żeby dało się go wywołać wszędzie, także w warunkach.
• Przestrzega zasad hooków: wywołuje hooki na swoim najwyższym poziomie i jest wywoływany tylko z komponentów albo innych własnych hooków.
• Zwraca to, co jest przydatne. Tablica ([on, toggle]) jest wygodna, gdy wywołujący zmieniają nazwy wartości; obiekt ({ data, loading, error }) czyta się lepiej przy trzech wartościach i więcej.

useLocalStorage: stan, który przetrwa przeładowanie

useState zapomina wszystko po przeładowaniu. Ten hook odczytuje wartość początkową z localStorage i zapisuje tam każdą zmianę.

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

Podgląd działa w odizolowanej ramce, w której przeglądarka blokuje localStorage, więc tutaj zobaczysz ostrzeżenie w konsoli, a hook wróci do zwykłego stanu. Na normalnej stronie imię przetrwa przeładowanie. try/catch nie jest tylko dla tego podglądu: tryby prywatne, zablokowane ciasteczka i pełny limit miejsca sprawiają, że magazyn rzuca błędy także w prawdziwych aplikacjach. Przekazanie funkcji do useState oznacza, że magazyn jest odczytywany raz, przy pierwszym renderowaniu.

useDebounce: poczekaj, aż użytkownik przestanie pisać

Pole wyszukiwania nie powinno wysyłać żądania przy każdym naciśnięciu klawisza. useDebounce zwraca kopię wartości, która aktualizuje się dopiero wtedy, gdy wartość przestanie się zmieniać przez zadany czas.

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

Szybko wpisz słowo: Typed podąża za każdym klawiszem, Debounced dogania pół sekundy po tym, jak przestaniesz, a konsola wypisuje jedno wyszukiwanie. Każde naciśnięcie klawisza zmienia value, więc React uruchamia funkcję czyszczącą (clearTimeout), zanim wystartuje nowy timer. Zmień 500 na 0, a każde naciśnięcie klawisza wypisze własne wyszukiwanie.

useWindowWidth: subskrypcja z funkcją czyszczącą

Hook, który nasłuchuje przeglądarki, musi usunąć nasłuchiwanie, gdy komponent znika, bo inaczej każde zamontowanie je zostawia.

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

Zmień rozmiar okna przeglądarki, a liczba za nim podąży. Kliknij przycisk, a konsola pokaże usunięcie nasłuchiwania. Usuń return z efektu, a potem kilka razy zamontuj i odmontuj komponent: za każdym razem dostajesz linię added, a żadnej removed, więc stare nasłuchiwania się kumulują. Dla wartości przeglądarki takich jak ta useSyncExternalStore to hook, który React zbudował właśnie do tego zadania, i warto wywoływać go wewnątrz własnego hooka.

Logika jest współdzielona, stan nie

Dwa komponenty wywołujące ten sam hook dostają dwie osobne kopie wszystkiego, co jest w środku. Zaskakuje to osoby, które oczekują, że hook zadziała jak zmienna globalna.

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

Kliknij którykolwiek przycisk, a ruszy się tylko ten licznik. Jeśli oba mają pokazywać tę samą liczbę, przenieś stan do App i przekaż go w dół albo umieść go w kontekście. Własny hook może dla wygody opakować taki wspólny stan (useCart() czytający CartContext), ale współdzielenie wynika z kontekstu, a nie z hooka.

Kiedy pisać własny hook

Wydziel hook, gdy ta sama grupa wywołań hooków pojawia się w dwóch komponentach albo gdy logika efektu w jednym komponencie jest na tyle długa, że nazwa wyjaśniłaby ją lepiej (useOnlineStatus() czyta się lepiej niż dwadzieścia linii nasłuchiwania). Nie opakowuj pojedynczego wywołania useState w hook tylko po to, żeby zmienić mu nazwę, i nie pisz hooków, które tylko wywołują useEffect, żeby ustawić stan z propsów; zamiast tego wyliczaj tę wartość podczas renderowania.