Виртуальный скролл реализовывал и самостоятельно, и с использованием библиотек.

Самостоятельная реализация включала отслеживание позиции скролла, динамическую подгрузку и отрисовку только видимых элементов списка, что значительно улучшало производительность при больших объемах данных. Такой подход требует аккуратного управления размерами элементов и обработкой событий прокрутки.

В проектах также использовал готовые библиотеки, например react-window или react-virtualized, которые предоставляют оптимизированные компоненты виртуального скролла с гибкими настройками и поддержкой различных сценариев.

Пример простой реализации виртуального скролла на React:

function VirtualList({ items, itemHeight, height }) {
  const [scrollTop, setScrollTop] = React.useState(0);
  const totalHeight = items.length * itemHeight;
  const startIndex = Math.floor(scrollTop / itemHeight);
  const visibleCount = Math.ceil(height / itemHeight);
  const visibleItems = items.slice(startIndex, startIndex + visibleCount);

  return (
    <div style={{ overflowY: 'auto', height }} onScroll={e => setScrollTop(e.currentTarget.scrollTop)}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        {visibleItems.map((item, i) => (
          <div key={startIndex + i} style={{ position: 'absolute', top: (startIndex + i) * itemHeight, height: itemHeight, width: '100%' }}>
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

Виртуальный скролл вы реализовывали самостоятельно или использовали библиотеку?