Состояние и хук useState

Состояние в React — это данные, которые могут меняться со временем и напрямую влияют на то, как компонент отображается в интерфейсе. В отличие от обычных переменных, состояние «живёт» внутри компонента и сохраняется между рендерами. React отслеживает изменения состояния и автоматически обновляет DOM при его изменении, что лежит в основе интерактивности веб-приложений.

Что такое состояние и зачем оно нужно

Состояние позволяет компоненту реагировать на действия пользователя (например, клики, ввод текста), получать данные с сервера или изменять внешний вид в зависимости от условий. Без состояния компоненты были бы статичными — как обычный HTML.

Важно помнить: состояние локально для конкретного компонента. Оно не сохраняется после перезагрузки страницы или перезапуска приложения — для долговременного хранения требуются дополнительные механизмы, такие как localStorage.

Хук useState: синтаксис и инициализация

Хук useState — основной способ добавления состояния в функциональные компоненты. Его синтаксис:

const [state, setState] = useState(initialValue);

Здесь state — текущее значение состояния, а setState — функция для его обновления. Начальное значение (initialValue) может быть любого типа: строка, число, булево значение, массив, объект и даже null.

Примеры инициализации:

  • useState(false) — для переключателей (например, темный режим)
  • useState('') — для текстовых полей
  • useState([]) — для списков
  • useState({ name: '', age: 0 }) — для объектов

Обновление состояния

Состояние в React обновляется только через функцию-сеттер (setState). Прямое присваивание (state = newValue) не сработает — React не узнает об изменении.

Есть два способа обновления:

  • Прямое: setState(newValue) — когда новое значение не зависит от предыдущего.
  • Функциональное: setState(prev => prev + 1) — когда новое значение зависит от текущего. Это особенно важно при частых или асинхронных обновлениях.

Иммутабельность состояния

React полагается на иммутабельность: вы не должны мутировать существующие объекты или массивы. Вместо этого создаёте новую копию с изменениями.

Неправильно:

user.name = 'Алиса';
setUser(user);

Правильно:

setUser({ ...user, name: 'Алиса' });

Для массивов:

setItems([...items, newItem]); // добавление
setItems(items.filter(item => item.id !== id)); // удаление

Это гарантирует, что React корректно определит, изменились ли данные, и выполнит повторный рендер.