Выбор ответа Middle memo, useMemo, useCallback обновлено
memo и children
Вопрос
Card обёрнут в memo, но рендерится при каждом рендере Page. Почему?
function Page() {
const [n, setN] = useState(0);
return (
<Card title="Новости">
<p>Текст</p>
</Card>
);
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: JSX в children это новый объект на каждом рендере Page. <pТекст</p превращается в новый объект React-элемента при каждом рендере, а children такой же проп, как остальные.
Варианты ответа
memoне работает с компонентами, у которых есть childrentitleстрока, а строки сравниваются по ссылке и каждый раз новые- Нужно обернуть
<p>вuseCallback, чтобы элемент стал стабильным - JSX в
childrenэто новый объект на каждом рендереPageправильный ответ
Разбор
<p>Текст</p> превращается в новый объект React-элемента при каждом рендере, а children такой же проп, как остальные. Поэтому сравнение props не проходит. memo с children работает, если элемент стабилен (например, мемоизирован). Строки сравниваются по значению. useCallback предназначен для функций, а не для JSX.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.