Как писать пользовательский hook?

Кастомный хук — обычная функция, которая начинается с `use` и внутри вызывает другие хуки. Никакого специального API у React для этого нет.

Пример

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

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

  return debounced;
};

// использование
const debouncedQuery = useDebounce(query);

Правила

• Имя с `use` + заглавная буква — по нему ESLint (react-hooks) применяет правила хуков и проверяет зависимости.
• Хуки внутри вызываются на верхнем уровне — не в условиях, циклах, колбэках.
• Возвращать можно что угодно: значение, кортеж [value, setValue], объект ({ data, isLoading, refetch } — удобно, когда полей много).
• Внутри можно композировать другие кастомные хуки (useAuth внутри useApi).

Главное

Кастомный хук переиспользует логику, а не данные: каждый вызов создаёт независимое состояние. Нужны общие данные — контекст или стор.

Хороший дизайн

• Одна ответственность на хук (useDebounce, useOnlineStatus, useLocalStorage).
• Обязательный cleanup для подписок и таймеров.
• Стабильные ссылки на возвращаемые функции (useCallback), если потребитель кладёт их в deps.
• Тестировать изолированно — renderHook из Testing Library.

Коротко для собеседования

Кастомный хук — функция с именем на use, использующая другие хуки: выносит повторяющуюся stateful-логику (загрузка, подписки, дебаунс) из компонентов. Правила хуков действуют внутри; каждый вызов даёт своё состояние (шарится логика, не данные). Возвращать значение/кортеж/объект, не забывать cleanup, тестировать через renderHook.