Код-ревью Middle Отладка и профилирование обновлено
Код-ревью: экран с поиском
Вопрос
Экран поиска товаров. Найдите проблемы производительности и отладки.
export function SearchScreen() {
const [query, setQuery] = useState('');
const { products } = useStore();
console.log('render', products);
const filtered = products.filter((p) => p.title.toLowerCase().includes(query.toLowerCase()));
useEffect(() => {
const id = setInterval(() => analytics.track('alive'), 1000);
}, []);
return (
<View>
<TextInput value={query} onChangeText={setQuery} />
<FlatList data={filtered} renderItem={({ item }) => <ProductRow product={item} />} />
</View>
);
}
Коротко
Подписка на стор через селектор, логи только в debug, тяжёлые вычисления с мемоизацией и откладыванием (useDeferredValue), эффекты с очисткой, мемоизированные строки и стабильные ключи.
Что должен найти ревьюер
- Производительностьстрока 3
useStore()без селектора: экран перерисовывается при любом изменении стора. - Производительностьстрока 4Логирование всего массива товаров на каждом рендере замедляет JS-поток и засоряет логи; в релизе логи нужно убирать.
- Производительностьстрока 5Фильтрация всех товаров на каждый символ без мемоизации и дебаунса; при больших списках нужен
useMemo,useDeferredValueили дебаунс. - Ошибкастрока 7Интервал не очищается: после ухода с экрана продолжает работать, при повторных открытиях их становится больше.
- Производительностьстрока 12Инлайновый
renderItem, нетkeyExtractorпо id и мемоизацииProductRow.
Разбор
Подписка на стор через селектор, логи только в debug, тяжёлые вычисления с мемоизацией и откладыванием (useDeferredValue), эффекты с очисткой, мемоизированные строки и стабильные ключи.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.