Выбор ответа Junior Архитектура состояния обновлено
Производное состояние
Вопрос
Что не так в этом коде?
const [first, setFirst] = useState('');
const [last, setLast] = useState('');
const [fullName, setFullName] = useState('');
useEffect(() => {
setFullName(first + ' ' + last);
}, [first, last]);
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: fullName производное: его надо вычислять в рендере, а не хранить. Хранение вычислимого значения в state создаёт второй источник правды и лишний рендер: сначала рисуется старое значение, потом эффект его обновляет.
Варианты ответа
- Ничего: синхронизация состояния эффектом это стандартный подход
fullNameпроизводное: его надо вычислять в рендере, а не хранитьправильный ответ- Нужно использовать
useLayoutEffect, тогда второго рендера не будет - Не хватает
useCallbackдляsetFullName, он меняется каждый рендер
Разбор
Хранение вычислимого значения в state создаёт второй источник правды и лишний рендер: сначала рисуется старое значение, потом эффект его обновляет. Правильно const fullName = first + " " + last, а для дорогих вычислений useMemo. useLayoutEffect уберёт мигание, но не проблему дублирования. setFullName и так стабилен, useCallback не нужен.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.