React: Что такое Hooks (хуки) и как useState упростил управление состоянием компонентов по сравнению с классами?
## Что такое Hooks в React?
Hooks (хуки) — это специальные функции в React, введённые в версии 16.8, которые позволяют использовать возможности React (состояние, жизненный цикл, контекст и другие) внутри **функциональных компонентов**, без необходимости писать классы.
До появления хуков функциональные компоненты были «тупыми» — они могли только получать пропсы и возвращать JSX. Всё, что требовало состояния или побочных эффектов, приходилось реализовывать через классовые компоненты.
—
## Классовые компоненты: как было раньше
В классовом компоненте управление состоянием выглядело так:
jsx
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
);
}
}
Проблемы классового подхода:
— Обязательный вызов `super(props)` в конструкторе
— Постоянное использование `this`, которое легко потерять из-за контекста
— Громоздкий синтаксис даже для простых компонентов
— Сложность переиспользования логики состояния между компонентами
— Трудности с тестированием
—
## useState: как стало с хуками
Тот же пример с хуком `useState`:
jsx
import { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
);
}
`useState` принимает начальное значение и возвращает массив из двух элементов:
1. **Текущее значение состояния**
2. **Функцию для его обновления**
—
## Ключевые преимущества useState перед классами
1. **Чистый и лаконичный код** — не нужен конструктор, `this`, `super`.
2. **Несколько независимых состояний** — можно вызывать `useState` несколько раз для разных переменных.
3. **Нет проблем с `this`** — функциональные компоненты работают как обычные функции.
4. **Легко переиспользовать логику** — через кастомные хуки (Custom Hooks).
5. **Лучшая читаемость** — код проще понять и поддерживать.
—
## Другие популярные хуки
— `useEffect` — замена методам жизненного цикла (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount`)
— `useContext` — доступ к контексту без HOC
— `useReducer` — управление сложным состоянием
— `useMemo` и `useCallback` — оптимизация производительности
— `useRef` — работа с DOM и сохранение мутабельных значений
—
## Правила использования хуков
1. Вызывайте хуки только **на верхнем уровне** функции (не внутри условий и циклов)
2. Используйте хуки только **внутри функциональных компонентов** или кастомных хуков
Hooks полностью изменили подход к разработке на React, сделав код более декларативным, переиспользуемым и удобным для тестирования.