Did you implement virtual scrolling yourself or use a library?

The virtual scroll was implemented both independently and using libraries.

The independent implementation included tracking the scroll position, dynamic loading, and rendering only the visible list items, which significantly improved performance with large data volumes. This approach requires careful management of element sizes and scroll event handling.

In projects, ready-made libraries such as react-window or react-virtualized were also used, which provide optimized virtual scroll components with flexible settings and support for various scenarios.

Example of a simple virtual scroll implementation in 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>
  );
}