Lazy Loading & Code Splitting

What strategy should be used for handling long lists or tables with lazy loading?

function VirtualList({ items, rowHeight, visibleRows }) {
  const [scrollTop, setScrollTop] = useState(0);
  const startIndex = Math.floor(scrollTop / rowHeight);
  const visibleItems = items.slice(startIndex, startIndex + visibleRows);

  return (
    <div onScroll={e => setScrollTop(e.target.scrollTop)}
         style={{ height: visibleRows * rowHeight }}>
      <div style={{ height: items.length * rowHeight,
                    paddingTop: startIndex * rowHeight }}>
        {visibleItems.map(item => (
          <div style={{ height: rowHeight }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

Load all items at once
Implement infinite scroll without virtualization
Use virtualization with windowing technique
Virtualization with windowing technique is the best strategy for handling long lists because: 1) It maintains smooth scrolling performance by rendering only visible items, 2) Reduces memory usage by not keeping all DOM nodes in memory, 3) Provides seamless user experience with proper scroll position management, 4) Scales well with large datasets. The example demonstrates key aspects of virtualization: calculating visible items based on scroll position, maintaining proper scroll container height, and efficient item rendering. This approach is particularly important for web applications dealing with large datasets or infinite scrolling implementations.
Display only first 10 items

Next Question (16/20)