Виртуализация

Виртуализация (windowing) рендерит только видимые строки или ячейки в больших списках/таблицах, ограничивая число DOM-узлов. Библиотеки вроде `react-window` или TanStack Virtual считают scroll и монтируют только видимый диапазон.

					// Идея: рендер только [startIndex, endIndex]
const rowHeight = 48;
const visibleCount = Math.ceil(viewportHeight / rowHeight) + overscan;
				

| Задача | Подход | |--------|--------| | Переменная высота строки | Measure/estimate; remeasure при resize | | Accessibility | Сохранять focus и keyboard nav при scroll | | Selection | selected ID вне DOM | | Infinite load | Следующая страница у конца scroll |

Виртуализация помогает INP и памяти на таблицах 10k+ строк, но усложняет код. Короткие списки не виртуализируйте — overhead больше пользы.

На интервью: fixed vs dynamic height; компромисс overscan; virtualization и screen readers; когда проще pagination.

Типовые ошибки: сломанная keyboard navigation; jank от measure layout; равная высота при переносе текста.

Компромисс — эффективность DOM против сложности реализации и a11y.

Чеклист:

• Виртуализация только когда list size бьёт по метрикам.
• Тест keyboard и screen reader.
• Стабильная высота строк или аккуратный measure.
• Selection state в данных, не в DOM.