Как работает хук useState?

Question

Accepted Answer

`useState` предоставляет компоненту-функции **локальное, реактивное состояние**. Он возвращает пару: **текущее значение** и функцию **setter**. Вызов setter планирует переренdering с новым значением.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Две вещи, которые удивляют новичков

**1. Обновления являются асинхронными / пакетными.** `count` не изменяется в строке после `setCount`; она имеет новое значение при *следующей* переренdering. Поэтому это увеличивает только один раз:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Используйте **functional updater**, когда следующее значение зависит от предыдущего, потому что React передает последнее значение:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. Начальное значение используется только при первой переренdering.** Для дорогостоящего значения по умолчанию передайте функцию, чтобы она выполнялась один раз (ленивая инициализация):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Почему это важно

Состояние — это то, что делает компонент интерактивным — React повторно выполняет функцию и перепрображает пользовательский интерфейс при каждом изменении состояния.

Обращайтесь с состоянием как с **неизменяемым**: создавайте новый массив/объект вместо мутирования, например `setItems([...items, x])`, иначе React может не обнаружить изменение.