Какие библиотеки использовал для виртуализации

«Какие библиотеки использовал для виртуализации» — вопрос из категории Библиотеки, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

React Virtualized и React Window — самые популярные библиотеки для виртуализации списков.

React Virtualized — мощная, но немного устаревшая. Подходит для сложных сценариев (таблицы, динамические размеры элементов).

React Window — легковесная альтернатива от того же автора. Оптимальна для большинства случаев, особенно если элементы фиксированной высоты.

Пример с React Window:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const VirtualizedList = () => (
  <List height={400} itemCount={1000} itemSize={50} width={300}>
    {Row}
  </List>
);

Для таблиц можно использовать react-table с плагином виртуализации.

Если нужна виртуализация сетки — react-window тоже поддерживает FixedSizeGrid.