Выбор ответа Junior Состояние и useState/useReducer обновлено
setState в теле компонента
Вопрос
Что произойдёт при рендере этого компонента?
function Counter() {
const [count, setCount] = useState(0);
setCount(count + 1);
return <p>{count}</p>;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Ошибка о слишком большом числе повторных рендеров. Безусловный setCount в теле компонента планирует новый рендер, в котором снова вызывается setCount, и так бесконечно.
Варианты ответа
- Счётчик увеличится на 1 при монтировании и остановится
- Ничего: React игнорирует setState во время рендера
- Счётчик увеличится на 2 в StrictMode и на 1 без него
- Ошибка о слишком большом числе повторных рендеровправильный ответ
Разбор
Безусловный setCount в теле компонента планирует новый рендер, в котором снова вызывается setCount, и так бесконечно. React прерывает это ошибкой «Too many re-renders». Обновление state во время рендера допустимо только под условием, которое перестанет выполняться. Игнорирования нет, и одним рендером дело не кончится.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация