Virtual scrolling

Virtual scrolling

Virtual scrolling (o windowing) renderiza solo los elementos visibles en pantalla, mejorando rendimiento en listas grandes.

Problema: renderizado completo

// ❌ Bad: Rendering thousands of nodes
function renderList(items) {
  return items.map(item => );
}

Solución: ventana visible

// ✅ Simple virtual list (concept)
function VirtualList({ items, itemHeight, height }) {
  const [scrollTop, setScrollTop] = useState(0);
  const start = Math.floor(scrollTop / itemHeight);
  const visibleCount = Math.ceil(height / itemHeight);
  const end = start + visibleCount;
  
  const visibleItems = items.slice(start, end);
  
  return (
    
 setScrollTop(e.target.scrollTop)}
    >
      

        

          {visibleItems.map(item => (
            
          ))}
        
      
    
  );
}

Librerías útiles

• react-window (ligera y rápida)
• react-virtualized (más features)
• TanStack Virtual (headless)