Пользовательские хуки React: как написать свой, с примерами

Пользовательский хук это функция, имя которой начинается с use и которая вызывает другие хуки. Его пишут, когда двум компонентам нужна одна и та же логика с состоянием: перенесите вызовы useState и useEffect в функцию, верните то, что нужно компоненту, и вызывайте её из каждого компонента.

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

Оба спойлера вызывают useToggle, и открытие одного оставляет другой закрытым. Каждый вызов выполняет собственный useState, поэтому каждый компонент получает своё значение. Пользовательский хук делится логикой, а не состоянием.

Правила написания

• Имя начинается с use и заглавной буквы: useToggle, useOnlineStatus. Правило линтера для хуков использует префикс, чтобы находить вызовы хуков и проверять их.
• Он вызывает хотя бы один хук. Помощник, который не вызывает хуков, это обычная функция; назовите её formatDate, а не useFormatDate, чтобы её можно было вызывать где угодно, в том числе внутри условий.
• Он подчиняется правилам хуков: вызывает хуки на своём верхнем уровне и вызывается только из компонентов или других пользовательских хуков.
• Он возвращает то, что полезно. Массив ([on, toggle]) удобен, когда вызывающие переименовывают значения; объект ({ data, loading, error }) читается лучше для трёх и более.

useLocalStorage: состояние, которое переживает перезагрузку

useState забывает всё при перезагрузке. Этот хук читает начальное значение из localStorage и записывает туда каждое изменение.

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

Превью работает в изолированном фрейме, где браузер блокирует localStorage, поэтому здесь вы увидите предупреждение в Console, а хук перейдёт на обычное состояние. На обычной странице имя переживёт перезагрузку. try/catch нужен не только для этого превью: режимы приватного просмотра, заблокированные cookie и заполненная квота тоже заставляют хранилище выбрасывать ошибки в настоящих приложениях. Передача функции в useState означает, что хранилище читается один раз, при первом рендере.

useDebounce: подождать, пока пользователь перестанет печатать

Поле поиска не должно отправлять запрос при каждом нажатии клавиши. useDebounce возвращает копию значения, которая обновляется только после того, как оно перестало меняться на заданное время.

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

Быстро наберите слово: Typed следует за каждой клавишей, Debounced догоняет через полсекунды после остановки, а Console выводит один поиск. Каждое нажатие клавиши меняет value, поэтому React выполняет очистку (clearTimeout) перед запуском нового таймера. Замените 500 на 0, и каждое нажатие клавиши будет выводить собственный поиск.

useWindowWidth: подписка с очисткой

Хук, который слушает браузер, должен удалять обработчик, когда компонент уходит, иначе каждое монтирование оставляет его после себя.

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

Измените размер окна браузера, и число последует за ним. Нажмите кнопку, и Console покажет, что обработчик удаляется. Удалите return из эффекта, затем несколько раз смонтируйте и размонтируйте: каждый раз появляется строка added, а removed нет, поэтому старые обработчики накапливаются. Для значений браузера вроде этого React создал useSyncExternalStore, и его хорошо вызывать внутри пользовательского хука.

Логика общая, состояние нет

Два компонента, вызывающие один и тот же хук, получают две отдельные копии всего, что внутри него. Это удивляет тех, кто ожидает, что хук работает как глобальная переменная.

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

Нажмите любую кнопку, и сдвинется только этот счётчик. Если оба должны показывать одно и то же число, перенесите состояние в App и передайте его вниз или положите в контекст. Пользовательский хук может оборачивать это общее состояние для удобства (useCart(), читающий CartContext), но общим его делает контекст, а не хук.

Когда писать пользовательский хук

Выносите хук, когда одна и та же группа вызовов хуков появляется в двух компонентах или когда логика эффекта одного компонента настолько длинная, что имя объяснило бы её лучше (useOnlineStatus() читается лучше двадцати строк обработчиков). Не оборачивайте один вызов useState в хук только ради переименования и не пишите хуки, которые лишь вызывают useEffect, чтобы установить состояние из пропсов; вычисляйте такое значение во время рендера.