Выбор ответа Middle memo, useMemo, useCallback спрашивают часто обновлено
useCallback без memo
Вопрос
Что даст useCallback в этом коде, если Button не обёрнут в memo?
const handleClick = useCallback(() => setOpen(true), []);
return <Button onClick={handleClick}>Открыть</Button>;
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Почти ничего: Button всё равно рендерится с родителем. Обычный компонент рендерится вместе с родителем независимо от props, поэтому стабильная ссылка ничего не экономит.
Варианты ответа
Buttonперестанет перерендериваться вместе с родителем- Функция
handleClickперестанет создаваться на каждом рендере - Почти ничего:
Buttonвсё равно рендерится с родителемправильный ответ - Ускорит обработку клика, потому что функция уже готова
Разбор
Обычный компонент рендерится вместе с родителем независимо от props, поэтому стабильная ссылка ничего не экономит. Функция при этом всё равно создаётся на каждом рендере, просто useCallback возвращает сохранённую. На скорость самого клика он не влияет. Смысл появляется, если получатель в memo или функция стоит в зависимостях хука.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props