Ко всем темам React
React • Тематический раздел2 сценария

Производительность и Виртуализация

TanStack Virtual v3, динамические высоты строк и URL-состояние с Nuqs

Рендеринг списков и таблиц на 100 000+ элементов: виртуальное окно (Windowing), замеры высоты ResizeObserver, удержание скролла и сериализация фильтров в URL.

TanStack Virtual 3Nuqs URL StateWindowing100k+ СтрокCore Web Vitals
Прогресс темы
0%(0 из 2 пройдено)
+100 XP~75 мин

Практические сценарии раздела

2 сценариев доступно для выполнения

Уровень сложности:
Senior35 мин+50 XP
Виртуализация высоконагруженных списков и таблиц: TanStack Virtual v3, динамические высоты и синхронизация URL с Nuqs

Построение виртуализированного интерфейса на 100k+ записей: Windowing алгоритм, динамическая высота строк через ResizeObserver, удержание позиции скролла и сохранение фильтров в URL search params.

React 19TanStack Virtual 3.xTypeScript 5.8+Nuqs 2.x
Сквозной сценарийОткрыть воркфлоу
Senior40 мин+50 XP
Профилирование React 19: устранение лишних ререндеров, React DevTools Flamegraph и оптимизация INP

Глубокое руководство по профилированию и оптимизации производительности в React 19: чтение графиков Flamegraph в React DevTools, отладка холостых каскадных ререндеров, разбиение длинных задач (Long Tasks) для удержания метрики INP менее 50 мс и ментальная модель React Compiler.

React 19React DevTools ProfilerPerformance APIscheduler.yield()useTransition
Сквозной сценарийОткрыть воркфлоу