import { useRef, useState, useCallback, useEffect } from 'react'; interface VirtualizedListProps { items: T[]; itemHeight: number; renderItem: (item: T, index: number) => React.ReactNode; overscan?: number; className?: string; } export function VirtualizedList({ items, itemHeight, renderItem, overscan = 3, className = '' }: VirtualizedListProps) { const containerRef = useRef(null); const [scrollTop, setScrollTop] = useState(0); const [containerHeight, setContainerHeight] = useState(0); useEffect(() => { const el = containerRef.current; if (!el) return; const observer = new ResizeObserver(([entry]) => { setContainerHeight(entry.contentRect.height); }); observer.observe(el); const handleScroll = () => { setScrollTop(el.scrollTop); }; el.addEventListener('scroll', handleScroll, { passive: true }); setContainerHeight(el.clientHeight); return () => { observer.disconnect(); el.removeEventListener('scroll', handleScroll); }; }, []); const totalHeight = items.length * itemHeight; const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan); const endIndex = Math.min( items.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan ); const visibleItems = items.slice(startIndex, endIndex); const offsetY = startIndex * itemHeight; return (

{visibleItems.map((item, i) => (

{renderItem(item, startIndex + i)}

))}

); }

Virtualized List

Examples

Example 1

Example 2