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

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

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

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

Контент

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

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

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

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

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

**Хук (hook)** у React - це **спеціальна функція**, яка дозволяє **«підключати» внутрішні можливості React** (такі як стан, життєвий цикл, контекст тощо) **у функціональних компонентах**, без потреби використовувати класи.

---

### Простими словами

Хуки дають функціональним компонентам «мізки» - дозволяють їм запам'ятовувати стан, реагувати на зміни, виконувати побічні ефекти та взаємодіяти з контекстом.

---

### Приклад: useState

Хук useState додає стан у функціональний компонент.

```javascript
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // the useState hook

return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
```

Тут useState(0):

- створює внутрішній стан count,
- повертає пару [значення, функція для оновлення].

---

### Приклад: useEffect

Хук useEffect використовується для побічних ефектів, наприклад, запитів до API, роботи з DOM або підписок.

```javascript
import { useState, useEffect } from "react";

function User() {
  const [user, setUser] = useState(null);

useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []); // empty array -> runs once on mount

return <div>{user ? user.name : "Loading..."}</div>;
}
```

---

### Основні вбудовані хуки React

| Хук | Призначення |
|---|---|
| useState | Додає стан у функціональний компонент |
| useEffect | Виконує побічні ефекти (запити, таймери, підписки) |
| useContext | Дозволяє використовувати контекст без Context.Consumer |
| useReducer | Керує станом через редʼюсер (альтернатива useState) |
| useMemo | Кешує обчислені значення |
| useCallback | Кешує функції |
| useRef | Створює «посилання» для зберігання значення між рендерами |
| useLayoutEffect | Аналог useEffect, але викликається до відмальовування |
| useImperativeHandle | Керує тим, що доступно батьківському компоненту через ref |
| useTransition, useDeferredValue | Керування відкладеними оновленнями (React 18+) |

---

### Правила хуків

1. Хуки можна викликати лише на верхньому рівні компонента (не всередині if, for або вкладених функцій).
2. Хуки можна викликати лише всередині функціональних компонентів або власних хуків.

---

### Навіщо React ввів хуки?

До хуків логіка станів і ефектів була доступна лише в класових компонентах.
Хуки дозволили:

- писати менше коду,
- повторно використовувати логіку через кастомні хуки,
- позбутися плутанини з this.

---

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

Для рев’юера

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

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