Как ускорить медленный список
Вопрос
Лента в приложении тормозит при прокрутке. Что вы будете делать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Замерить на release-сборке и слабом устройстве, профайлер React
`memo` для строк, стабильные `renderItem` и обработчики
Стабильный `keyExtractor`, `getItemLayout` для фиксированной высоты
Изображения нужного размера с кешем
Настройки окна (`windowSize`, `maxToRenderPerBatch`) после замеров
FlashList с переиспользованием, если этого мало
Что могут спросить следом
- Почему строка перерисовывается при изменении соседней?
- Какие риски у FlashList?
- Как сделать бесконечную подгрузку без дублей?
Разбор
Образцовый ответ: «Сначала воспроизвожу на release-сборке на недорогом Android: в debug цифры бессмысленны. Профайлером смотрю, какие компоненты рендерятся при прокрутке и подгрузке. Обычно находится, что строки не мемоизированы или получают новые колбэки и стили на каждый рендер, поэтому оборачиваю строку в memo, обработчики в useCallback, стили в StyleSheet. Проверяю ключи: нужен стабильный id. Если высота строк фиксированная, добавляю getItemLayout. Картинки грузятся в размере миниатюры и кешируются. Только после этого трогаю windowSize и пачки рендера. Если ленту всё ещё не вытянуть, перехожу на FlashList, помня, что он переиспользует компоненты, и локальное состояние строк нужно вынести»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.