DOM и React Junior Состояние и useState/useReducer обновлено
Две установки подряд
Условие
Кнопка должна увеличивать счётчик на 2 за один клик. Сейчас надо написать её с нуля - учти, что setCount вызывается дважды.
Что проверяют тесты
плюс два за клик
два клика дают четыре
Как подойти
Внутри одного обработчика count заморожен значением текущего рендера. Два вызова setCount(count+1) - это дважды «поставить count+1». Функциональная форма setCount(c => c+1) читает свежее значение из очереди. Это же объясняет, почему в React 18 обновления пакуются в один рендер.
Подсказки: 2
- setCount(count + 1) дважды подряд даёт +1, а не +2.
- Функциональная форма получает актуальное значение, а не захваченное при рендере.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация