Що таке кастомні хуки в React

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

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

Чому Користувацькі Хуки?

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

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

Уникнення дублювання

Замість того, щоб повторювати один і той же useEffect або useState в кількох компонентх, ви пишете хук один раз і повторно його використовуєте.

Поліпшення читабельності

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

Простий Приклад Користувацького Хука

До: без користувацького хуку

jsx

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

Після: з користувацьким хуком

jsx

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

jsx

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

Висновок:

Користувацькі хуки роблять ваш код повторно використовуваним, читабельним та чистим. Вони допомагають вилучити повторювану логіку з компонентів та організувати архітектуру програми.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань