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