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 хв

AI-Собеседование по темеОтработка вопросов Senior уровня

Симулятор сбоев в LabРешение инцидентов и аудит рантайма

Карта грейдов RoadmapПоложение темы в матрице грейдов

Практичні сценарії розділу

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, усунення зайвих ререндерів та тюнінг INP

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

React 19React DevTools ProfilerPerformance APIscheduler.yield()useTransition

Наскрізний сценарійВідкрити воркфлоу

Інші розділи напрямку React

Переходьте до суміжних тем для комплексного опанування спеціалізації.

Всі розділи

2 сценарії

Управління станом та кешування

Архітектура Zustand, персистентність, useShallow та TanStack Query v5

Відкрити розділ

3 сценарії

Компонентна архітектура та дизайн-системи

Compound Components, Radix Primitives/Base UI та доступність WAI-ARIA

Відкрити розділ