Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Інші хуки всередині кастомного хука». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Ключова ідея

> Кастомний хук - це **звичайна функція**,
> яка **використовує всередині себе інші хуки** (`useState`, `useEffect`, `useMemo`, `useRef`, `useCallback` і навіть інші кастомні хуки).

React не робить різниці між "вбудованими" хуками і власними:
головне - **дотримуватися тих самих правил хуків**.

---

## Так, можна - приклад

```javascript
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 сприймає це абсолютно нормально.

---

## Можна використовувати **інші кастомні хуки**

```javascript
function useUserData(userId) {
  const data = useFetch(`/api/users/${userId}`);
  const online = useOnlineStatus();
  return { ...data, online };
}
```

`useUserData` використовує два **інших кастомних хуки**
(`useFetch` і `useOnlineStatus`) - і це повністю коректно.

Таким чином, хуки можна **комбінувати**, створюючи цілі рівні перевикористовуваної логіки - як "шари" Lego.

---

## Важливо дотримуватися **правил хуків**

| Правило | Чому важливо |
|---|---|
| Хук має починатися з `use` | React визначає хуки за назвою |
| Викликати хуки **лише на верхньому рівні** | Щоб порядок викликів не порушувався |
| Не можна викликати хуки **всередині умов, циклів, функцій** | React відстежує їхній порядок за стеком викликів |
| Хуки можна викликати **лише всередині** функцій-компонентів або **інших хуків** | Поза React-контекстом вони не працюють |

---

## Приклад помилки

```javascript
function useExample(flag) {
  if (flag) {
    // Помилка! useState викликається умовно
    const [count, setCount] = useState(0);
  }
}
```

React видасть помилку:

```javascript
Invalid hook call. Hooks can only be called inside the body of a function component.
```

Правильно:

```javascript
function useExample(flag) {
  const [count, setCount] = useState(0);
  if (flag) {
    // тепер можна використовувати значення count
  }
}
```

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Чи можна використовувати інші хуки всередині кастомного хука? | Так, можна - і це основне призначення кастомних хуків |
| Які хуки можна використовувати | Будь-які: вбудовані (`useState`, `useEffect`, …) і навіть інші кастомні |
| Які обмеження | Дотримуйся правил хуків: не викликати в умовах, лише на верхньому рівні |
| Навіщо це потрібно | Щоб перевикористовувати логіку і будувати хуки на основі інших - як конструктор |

---

**Головна ідея:**

> Кастомні хуки - це спосіб **комбінувати вбудовані хуки**,
> створюючи перевикористовувану, чисту і передбачувану логіку.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати412 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.