Ответ
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.
Ответ 18+ 🔞
А, слушай, вот это тема — виртуализация списков в Реакте, блядь! Ну, тут два главных героя, как в плохом сериале: React Virtualized и React Window. И сейчас я тебе, сука, разложу, кто из них уже немного в маразме, а кто ещё огурцом.
React Virtualized — это, типа, старый могучий орк, ёпта. Сильный, мощный, навороченный — таблицы, динамические размеры элементов, всякие сложные пиздюлины. Но, понимаешь, он уже слегка потрёпанный жизнью, тяжёлый, как чемодан без ручки. Для каких-то ебнутых сложных кейсов — ещё годится, но тащить его в простой проект — это как ехать на магазин за хлебом на танке, блядь.
React Window — это его младший брат, который взял только самое нужное и похудел на овердохуища килограммов. Тот же самый автор, кстати! Лёгкий, быстрый, и для 95% случаев — просто идеален, особенно если у тебя там элементы одной высоты. Все его и советуют.
Вот, смотри, как это просто, даже обезьяна поймёт:
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. Это вообще отдельная религия, но там можно прикрутить плагин для виртуализации, и будет тебе счастье.
Ну и на десерт: если вдруг тебе не список, а СЕТКА, понимаешь, типа как в Pinterest — то react-window и тут не подведёт, у него есть FixedSizeGrid. В общем, инструмент на все случаи жизни, ёпта.
Короче, если не хочешь, чтобы твое приложение легло плашмя от 10 тысяч строк в списке — бери react-window и не парься. А старичка Virtualized вспоминай только в кошмарных снах про legacy-код, блядь.