Выбор ответа Middle Состояние и useState/useReducer обновлено
Ленивая инициализация
Вопрос
Сколько раз вызовется parseHugeJson за 10 рендеров компонента?
const [data, setData] = useState(parseHugeJson(raw));
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 10 раз: выражение вычисляется при каждом вызове компонента. React действительно использует начальное значение только при первом рендере, но JavaScript вычисляет аргумент parseHugeJson(raw) перед вызовом useState каждый раз.
Варианты ответа
- Один раз: аргумент useState используется только на первом рендере
- Ни разу до первого обращения к
data - Зависит от того, обёрнут ли компонент в
memo - 10 раз: выражение вычисляется при каждом вызове компонентаправильный ответ
Разбор
React действительно использует начальное значение только при первом рендере, но JavaScript вычисляет аргумент parseHugeJson(raw) перед вызовом useState каждый раз. Нужна функция-инициализатор: useState(() => parseHugeJson(raw)). Ленивых вычислений по обращению в JS нет. memo влияет на то, сколько будет рендеров, а не на поведение внутри каждого.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Правила хуков
- Пакетирование обновлений