Объясните механизм: обработчик одного клика дважды вызывает обновление счётчика на основе текущего значения. Почему счётчик обычно увеличится только на единицу, а не на две, и как минимальный пример с функциональным обновлением исправит ситуацию?

Question

Accepted Answer

Значение состояния в обработчике — это снимок, полученный во время текущего рендера. Поэтому оба обычных обновления вычисляют одно и то же следующее значение и React применяет результат как одно увеличение. Функциональное обновление получает актуальное промежуточное значение из очереди обновлений, поэтому два таких обновления дадут увеличение на два. Это особенно важно при нескольких зависимых обновлениях одного состояния в одном событии. function Counter { const count, setCount = useState 0 ; function incrementTwice { setCount prev = prev + 1 ; setCount prev = prev + 1 ; } } Каждый prev берётся после предыдущего обновления в очереди, а не из замыкания обработчика.