> Как работает состояние счетчика при ререндере в React? (React)

В React состояние счетчика (и любого другого состояния, заданного через useState) при ререндере работает следующим образом:

1. Инициализация: При первом рендере компонента useState(initialValue) создает ячейку состояния в виртуальном DOM (точнее, в «волокне» - fiber). Начальное значение вычисляется один раз.

2. Обновление: При вызове функции-сеттера (например, setCount(count + 1)) React помечает компонент как «грязный» и планирует ререндер. Само значение состояния не меняется мгновенно - оно сохраняется в замыкании текущего рендера.

3. Ререндер: При следующем рендере React снова вызывает функцию компонента. useState возвращает актуальное значение из своего внутреннего хранилища (не из переменной, объявленной в прошлом рендере). Это значение - то, которое было установлено последним вызовом сеттера до начала этого рендера.

4. Изоляция рендеров: Каждый рендер имеет свою «версию» состояния. Если вы зафиксировали значение в замыкании (например, в setTimeout), оно будет ссылаться на значение на момент того рендера, когда замыкание было создано. Это называется «замыканием в React» и может приводить к «stale closure» (устаревшему замыканию), если не использовать функциональную форму сеттера: setCount(prev => prev + 1).

Пример:

JSX
function Counter() {
  const [count, setCount] = useState(0);
  // При каждом ререндере count - это актуальное значение из хранилища React
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Если нажать кнопку три раза, произойдет три ререндера, и на каждом count будет увеличиваться на 1, начиная с предыдущего значения.