Выбор ответа Middle Отладка и профилирование обновлено
Лишние рендеры
Вопрос
Профайлер показывает, что при вводе в поиск перерисовывается весь экран, включая тяжёлый список. Что исправить в первую очередь?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Вынести состояние ввода в компонент поля, список мемоизировать. Если состояние поиска лежит в экране, каждый символ перерисовывает экран целиком.
Варианты ответа
- Обернуть весь экран в
memo, тогда ввод не будет его перерисовывать - Перенести значение поля ввода в Redux, чтобы экран не хранил его
- Вынести состояние ввода в компонент поля, список мемоизироватьправильный ответ
- Добавить
keyэкрану, чтобы React не пересоздавал список
Разбор
Если состояние поиска лежит в экране, каждый символ перерисовывает экран целиком. Состояние ввода выносят вниз (или используют неконтролируемый ввод с дебаунсом), а результат фильтра передают списку, обёрнутому в memo. memo на весь экран не поможет, ведь меняется его собственное состояние. Глобальный стор без селекторов лишь расширит перерисовки, а key их не уменьшает.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.