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

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

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

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

Контент

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

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

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

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

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

## Що саме роблять хуки

### 1. `useState` - **зберігає стан**

Дозволяє компоненту "запам'ятовувати" значення між рендерами.

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

function Counter() {
  const [count, setCount] = useState(0); // стан
  return (
    <button onClick={() => setCount(count + 1)}>
      Натиснули {count} раз
    </button>
  );
}
```

React "запам'ятовує" значення `count` для кожного екземпляра компонента і перемальовує його при зміні.

---

### 2. `useEffect` - **виконує побічні ефекти**

Відповідає за дії, **які не пов'язані напряму з рендером**:
- запити до API,
- підписки,
- таймери,
- робота з DOM.

```javascript
useEffect(() => {
  console.log("Компонент змонтовано");
  return () => console.log("Компонент видалено");
}, []);
```

`useEffect` з порожнім масивом виконується один раз при монтуванні і повертає "чистку" при демонтуванні.

---

### 3. `useContext` - **підключає контекст**

Дозволяє отримати дані з контексту без пропсів.

```javascript
const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Button />
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Тема: {theme}</button>;
}
```

Замість "прокидання" пропсів через багато рівнів можна напряму отримати потрібне значення.

---

### 4. `useRef` - **зберігає посилання на DOM або значення між рендерами**

```javascript
function InputFocus() {
  const inputRef = useRef();

useEffect(() => {
    inputRef.current.focus(); // фокус при монтуванні
  }, []);

return <input ref={inputRef} />;
}
```

`useRef` не викликає повторний рендер при зміні `.current`.

---

### 5. `useMemo` - **кешує обчислення**

Оптимізує продуктивність, не перераховуючи складні значення при кожному рендері.

```javascript
const sortedUsers = useMemo(() => sortUsers(users), [users]);
```

---

### 6. `useCallback` - **кешує функції**

Допомагає не перестворювати обробники при кожному рендері.

```javascript
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);
```

---

### 7. `useReducer` - **керує станом через редюсер**

Аналог Redux всередині компонента.

```javascript
function reducer(state, action) {
  if (action.type === "inc") return { count: state.count + 1 };
  return state;
}

const [state, dispatch] = useReducer(reducer, { count: 0 });
```

---

### 8. `useLayoutEffect` - **синхронний ефект**

Схожий на `useEffect`, але виконується **до відмальовування**, синхронно.
Використовується, коли потрібно виміряти DOM до того, як він з'явиться на екрані.

---

### 9. `useTransition`, `useDeferredValue` - **керування відкладеними оновленнями**

Потрібні для **оптимізації UI** при рендері великих списків, наприклад у React 18.

---

## Підсумок

| Хук | Що робить |
|---|---|
| `useState` | Зберігає стан |
| `useEffect` | Виконує побічні ефекти |
| `useContext` | Отримує дані з контексту |
| `useRef` | Зберігає посилання або незмінне значення |
| `useMemo` | Кешує обчислення |
| `useCallback` | Кешує функції |
| `useReducer` | Керує станом через редюсер |
| `useLayoutEffect` | Ефект, що виконується до рендера |
| `useTransition`, `useDeferredValue` | Роблять оновлення не блокуючими |

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

Для рев’юера

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

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