Выбор ответа Middle memo, useMemo, useCallback обновлено
Ввод тормозит всю страницу
Вопрос
На большой странице есть поле поиска, его value хранится в state корневого Dashboard, но нужен только самому полю. Ввод тормозит. Какое исправление проще и надёжнее всего?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Вынести поле вместе с его state в отдельный компонент. Если state нужен только полю, его стоит опустить в отдельный компонент: тогда ввод рендерит только этот компонент. memo на всё подряд добавляет сложность и легко ломается нестабильными props.
Варианты ответа
- Вынести поле вместе с его state в отдельный компонентправильный ответ
- Обернуть каждый виджет страницы в
memoсо стабильными props - Хранить
valueвuseRefи читать его в рендере поля - Перенести
valueв глобальный стор и подписать поле
Разбор
Если state нужен только полю, его стоит опустить в отдельный компонент: тогда ввод рендерит только этот компонент. memo на всё подряд добавляет сложность и легко ломается нестабильными props. Ref не вызовет рендер, и поле перестанет обновляться, если оно контролируемое. Глобальный стор без нужды расширяет зону, которая знает об этом state.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props