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

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

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

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

Контент

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

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

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

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

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

## 1. Хуки простіші, ніж класи

### Проблема з класами:

- Потрібно розуміти, як працює `this`.
- Часто доводиться робити **прив'язку методів** вручну:

```javascript
  this.handleClick = this.handleClick.bind(this);
  ```
- Помилки на кшталт `Cannot read property 'setState' of undefined` - часте явище.

### З хуками:

- Жодного `this` немає.
- Усе - звичайні функції:

```javascript
  const [count, setCount] = useState(0);
  ```

---

## 2. Хуки роблять код чистішим і логічнішим

### Проблема в класах:

Логіка, пов'язана з однією задачею (наприклад, робота з API),
розкидана по **різних методах життєвого циклу**:

```javascript
componentDidMount() { subscribe(); }
componentDidUpdate() { checkUpdate(); }
componentWillUnmount() { unsubscribe(); }
```

### З хуками:

Усе в одному місці:

```javascript
useEffect(() => {
  subscribe();
  return () => unsubscribe();
}, []);
```

Код стає **компактнішим і логічно згрупованим**.

---

## 3. Хуки дозволяють перевикористовувати логіку

### Проблема класів:

Щоб перевикористати логіку між компонентами, доводилося використовувати:

- **HOC (Higher-Order Components)** - вкладеність "пекельних" обгорток,
- або **Render Props** - складні структури JSX.

### З хуками:

Можна просто винести повторювану логіку в **кастомний хук**:

```javascript
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() =>
    JSON.parse(localStorage.getItem(key)) ?? initialValue
  );

useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

return [value, setValue];
}
```

Використовується як звичайний хук:

```javascript
const [theme, setTheme] = useLocalStorage('theme', 'light');
```

---

## 4. Хуки краще працюють із сучасними технологіями

- React-хуки **чудово поєднуються** з TypeScript, Suspense, Concurrent Rendering, Server Components.
- Класи погано інтегруються з новими можливостями React 18+.
- Хуки дозволяють **гнучко керувати станом і продуктивністю** (`useMemo`, `useCallback`, `useTransition`).

---

## 5. Класи складніше оптимізувати і тестувати

- Не завжди очевидно, коли викликаються методи життєвого циклу.
- Тестувати класовий компонент важче: доводиться мокати екземпляр.
- Функціональні компоненти з хуками - **просто чисті функції**, їх легко тестувати.

---

## Підсумок: чому React перейшов на хуки

| Проблема класів | Рішення з хуками |
| --- | --- |
| `this` і bind | Немає `this`, чисті функції |
| Розрізнена логіка життєвого циклу | useEffect об'єднує всю пов'язану логіку |
| Складна перевикористовність логіки | Кастомні хуки |
| Погана оптимізація і тестування | Чисті функції, краща передбачуваність |
| Погана сумісність із новими фічами React | Повна сумісність із сучасним API |

---

**Висновок:**
Хуки зробили React більш **декларативним, функціональним і модульним**.
Тому сьогодні **хуки - стандарт**, а класи лишилися тільки для підтримки старих проєктів.

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

Для рев’юера

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

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