Что такое хук useState в React?

Что такое хук useState в React?

useState — это один из встроенных хуков React, появившихся с версии 16.8. Он позволяет добавлять внутреннее состояние (state) в функциональные компоненты, что раньше было возможно только в классовых компонентах. Хук useState — это фундаментальный инструмент для управления динамическими данными и реактивностью в современном React.

Основной принцип работы

Хук useState возвращает массив из двух элементов:

1. Текущее значение состояния.
2. Функция для его обновления (сеттер).

Обычно используется деструктуризация массива для удобства. Хук принимает один аргумент — начальное значение состояния, которое может быть любым типом данных: примитивом (число, строка, булево), объектом, массивом или null.

import React, { useState } from 'react';

function Counter() {
  // Деструктуризация: count - текущее состояние, setCount - функция для обновления
  const [count, setCount] = useState(0); // Начальное значение 0

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

Ключевые особенности

• Асинхронность обновлений: Обновления состояния через useState не происходят мгновенно. React может группировать несколько вызовов setState для оптимизации производительности. Это важно учитывать при последовательных обновлениях.

• Функциональные обновления: Если новое состояние зависит от предыдущего, рекомендуется передавать функцию в сеттер. Это гарантирует актуальность предыдущего состояния.

// Вместо этого (может быть проблематично при частых обновлениях):
setCount(count + 1);

// Лучше так (используем функциональную форму):
setCount(prevCount => prevCount + 1);

• Правила хуков: useState (как и все хуки) должен вызываться только на верхнем уровне компонента, а не внутри циклов, условий или вложенных функций. Это позволяет React корректно сопоставлять вызовы хуков между рендерами.

Отличия от состояния в классовых компонентах

В классовых компонентах состояние — это единый объект, обновляемый частично через this.setState(). В useState состояние может быть несколькими независимыми переменными, что упрощает организацию логики.

// Вместо одного объекта состояния в классе:
// this.state = { count: 0, name: '' };

// В функциональном компоненте можно использовать несколько useState:
const [count, setCount] = useState(0);
const [name, setName] = useState('');

Особенности с объектами и массивами

При обновлении объектов или массивов важно помнить о иммутабельности. React сравнивает ссылки, поэтому нужно создавать новые объекты/массивы.

const [user, setUser] = useState({ name: 'Иван', age: 25 });

// ❌ Неправильно - изменяем существующий объект
user.age = 26; // React не заметит изменения

// ✅ Правильно - создаем новый объект
setUser({ ...user, age: 26 }); // Используем spread оператор

Ленивая инициализация

Если начальное состояние вычисляется затратно, можно передать функцию инициализации, которая выполнится только при первом рендере.

// Функция выполнится только один раз при монтировании
const [data, setData] = useState(() => {
  const initialValue = localStorage.getItem('key') || 'default';
  return initialValue;
});

Когда использовать useState

• Для управления простым локальным состоянием компонента (формы, флаги, счетчики)
• Когда не требуется сложная логика обновлений
• Для неглубоких структур данных, которые не требуют синхронизации между множеством компонентов

Для более сложных случаев (глобальное состояние, сложная бизнес-логика) лучше рассмотреть useReducer, Context API или сторонние решения (Redux, MobX).

Важные нюансы

1. Сеттер не меняет текущую переменную состояния в рамках выполняющегося рендера. Он планирует обновление для следующего рендера.
2. При одновременном вызове нескольких сеттеров React может батчить (объединять) обновления для оптимизации.
3. Не используйте useState для производных данных — вычисляйте их непосредственно в рендере.

useState кардинально изменил подход к разработке на React, сделав функциональные компоненты полноценными и более простыми для понимания и тестирования, чем классовые аналоги.