Выбор ответа Middle System design на фронте спрашивают часто обновлено
Длинный список
Вопрос
В списке 10 000 строк, скролл дёргается на средних телефонах. Что даст наибольший эффект?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Виртуализация: рендерить только видимые строки. Проблема в 10 000 DOM-узлах: память, стили, layout.
Варианты ответа
- Обернуть каждую строку списка в
React.memo - Виртуализация: рендерить только видимые строкиправильный ответ
- Перейти с
useStateна Redux Toolkit - Заменить
mapна обычный циклfor
Разбор
Проблема в 10 000 DOM-узлах: память, стили, layout. Виртуализация (TanStack Virtual, react-window) держит в DOM только видимые 20-40 строк. memo уменьшает повторные рендеры, но DOM всё равно огромный. Стейт-менеджер на число узлов не влияет. Разница map и for ничтожна.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.