Hack Frontend Community

Что такое кастомные хуки в React

Кастомные хуки (Custom Hooks) — это пользовательские функции, которые используют встроенные хуки React (useState, useEffect, useMemo и т.д.) для инкапсуляции и переиспользования логики в разных компонентах.

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

Зачем нужны кастомные хуки?

1

Инкапсуляция логики

Вы можете вынести связанную бизнес-логику (например, работу с API, формы, таймеры) в отдельный хук и использовать его в нескольких местах.

2

Избежание дублирования

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

3

Улучшение читаемости

Компоненты становятся меньше и чище, если основная логика вынесена в хуки.

Пример простого кастомного хука

До: без кастомного хука

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

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <p>Ширина: {width}px</p>;
}

После: с кастомным хуком

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

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

// Использование
function Component() {
  const width = useWindowWidth();
  return <p>Ширина: {width}px</p>;
}

Где применяются кастомные хуки

  • Работа с API (например, useFetch, useUserData)
  • Управление формами (useForm, useInput)
  • Состояния модалок, тултипов (useModal)
  • Работа с локальным хранилищем (useLocalStorage)
  • Таймеры, интервалы (useInterval, useDebounce)
  • Подключение к внешним библиотекам (useSocket, useMap)

Пример хука useLocalStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Использование
const [theme, setTheme] = useLocalStorage("theme", "light");

Вывод:

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