Почему обработчик видит «старое» значение состояния?
- Почему setCount(count + 1) три раза увеличивает только на 1?
- Что такое устаревшее замыкание в React?
Каждый рендер — снимок: функции компонента замыкают значения state этого рендера. setState не меняет переменную сразу, а планирует новый рендер. Поэтому setCount(count + 1) три раза подряд даёт +1: все три вызова видят одно и то же count. Если новое значение зависит от предыдущего — функциональное обновление setCount(c => c + 1). Та же причина у «застывших» значений в setTimeout, setInterval и эффектах с неполными зависимостями.
- Функциональное обновление всегда получает актуальное значение
- В эффектах — честный массив зависимостей
- Для «последнего значения» без перерисовки — useRef
А ещё console.log(state) сразу после setState покажет старое значение — это нормально
Подробно
function add3() {
setCount(count + 1); setCount(count + 1); setCount(count + 1); // +1
setCount(c => c + 1); setCount(c => c + 1); setCount(c => c + 1); // +3
}Что хотят услышать
- Рендер как снимок, замыкание значений.
- setState планирует обновление.
- Функциональное обновление.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗setState сразу меняет переменную state в текущей функции, поэтому новое значение видно в следующей строке
- ✗Это ошибка React, которая исправляется перезагрузкой страницы или переустановкой зависимостей
- ✓Обработчик замыкает state своего рендера; для зависимых обновлений — setCount(c => c + 1)
- ✗Три вызова setCount(count + 1) подряд увеличат счётчик на 3, потому что каждый видит новое значение
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.