Начать здесь

Состояние: от события к новому экрану

Почему обычной переменной недостаточно и что сохраняет useState.

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

Переменная между рендерами

Локальная переменная внутри функции создаётся заново при очередном вызове. Изменение этой переменной не сообщает React, что нужен новый рендер. Hook useState сохраняет значение между вызовами и возвращает функцию для запроса обновления.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Нажатий: {count}
    </button>
  );
}

Снимок текущего рендера

Вызов setCount не меняет переменную count внутри уже работающего обработчика. Обработчик видит снимок данных своего рендера. Если следующее значение зависит от предыдущего, передайте функцию обновления: c => c + 1.

Попробуйте

Добавьте кнопку сброса с setCount(0). Затем сделайте кнопку, которая вызывает функциональное обновление дважды. Сравните результат с двумя вызовами setCount(count + 1): оба таких вызова вычисляют значение из одного снимка.