Інші хуки всередині кастомного хука
Ключова ідея
Кастомний хук - це звичайна функція, яка використовує всередині себе інші хуки (
useState,useEffect,useMemo,useRef,useCallbackі навіть інші кастомні хуки).
React не робить різниці між "вбудованими" хуками і власними: головне - дотримуватися тих самих правил хуків.
Так, можна - приклад
function useCounter(initial = 0) {
const [count, setCount] = useState(initial);
useEffect(() => {
console.log("Лічильник змінився:", count);
}, [count]);
const inc = () => setCount((c) => c + 1);
const dec = () => setCount((c) => c - 1);
return { count, inc, dec };
}Тут useCounter використовує одразу два вбудовані хуки:
useStateдля зберігання стану,useEffectдля відстеження змін.
І React сприймає це абсолютно нормально.
Можна використовувати інші кастомні хуки
function useUserData(userId) {
const data = useFetch(`/api/users/${userId}`);
const online = useOnlineStatus();
return { ...data, online };
}useUserData використовує два інших кастомних хуки
(useFetch і useOnlineStatus) - і це повністю коректно.
Таким чином, хуки можна комбінувати, створюючи цілі рівні перевикористовуваної логіки - як "шари" Lego.
Важливо дотримуватися правил хуків
| Правило | Чому важливо |
|---|---|
Хук має починатися з use | React визначає хуки за назвою |
| Викликати хуки лише на верхньому рівні | Щоб порядок викликів не порушувався |
| Не можна викликати хуки всередині умов, циклів, функцій | React відстежує їхній порядок за стеком викликів |
| Хуки можна викликати лише всередині функцій-компонентів або інших хуків | Поза React-контекстом вони не працюють |
Приклад помилки
function useExample(flag) {
if (flag) {
// Помилка! useState викликається умовно
const [count, setCount] = useState(0);
}
}React видасть помилку:
Invalid hook call. Hooks can only be called inside the body of a function component.Правильно:
function useExample(flag) {
const [count, setCount] = useState(0);
if (flag) {
// тепер можна використовувати значення count
}
}Підсумок
| Питання | Відповідь |
|---|---|
| Чи можна використовувати інші хуки всередині кастомного хука? | Так, можна - і це основне призначення кастомних хуків |
| Які хуки можна використовувати | Будь-які: вбудовані (useState, useEffect, …) і навіть інші кастомні |
| Які обмеження | Дотримуйся правил хуків: не викликати в умовах, лише на верхньому рівні |
| Навіщо це потрібно | Щоб перевикористовувати логіку і будувати хуки на основі інших - як конструктор |
Головна ідея:
Кастомні хуки - це спосіб комбінувати вбудовані хуки, створюючи перевикористовувану, чисту і передбачувану логіку.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.