Вопрос с собеседования · Frontend

Как сделать интерфейс отзывчивым при тяжёлых обновлениях — useTransition и виртуализация?

MiddleПроизводительность
Ещё спрашивают так:
  • Как отрисовать список из 10 000 элементов?
  • Что делает useDeferredValue?
Коротко

useTransition помечает обновление как несрочное: ввод в поле применяется сразу, а тяжёлая перерисовка результатов идёт в фоне и может прерываться; isPending показывает индикатор. useDeferredValue — то же для значения, пришедшего извне. Виртуализация (TanStack Virtual, react-window) рендерит только видимые строки длинного списка плюс небольшой запас — DOM из десятков узлов вместо тысяч.

  • Transition не ускоряет работу, а делает её прерываемой
  • Виртуализация усложняет поиск по странице и доступность — учитывать
  • Пагинация или «показать ещё» иногда проще виртуализации

А ещё Сначала замер: тормозит рендер React или DOM и стили

Подробно

const [query, setQuery] = useState("");
const [filter, setFilter] = useState("");
const [isPending, startTransition] = useTransition();
function onChange(v: string) {
  setQuery(v);                        // срочно — поле ввода
  startTransition(() => setFilter(v)); // несрочно — список
}

Что хотят услышать

  • Срочные и несрочные обновления.
  • useDeferredValue.
  • Виртуализация длинных списков.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗useTransition ускоряет сами вычисления, перенося их в отдельный поток браузера
  • ✓useTransition делает тяжёлое обновление несрочным, виртуализация рендерит только видимые строки
  • ✗Виртуализация рендерит все элементы списка, но скрывает невидимые через CSS display: none
  • ✗Ввод в поле тоже нужно помечать как transition

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования