DOM node count under 1500 on typical page

Each DOM node has a memory and layout cost. A page with 3,000+ nodes triggers slower style recalculations, longer layout passes, and higher memory usage — all of which degrade scrolling smoothness and interaction responsiveness. ISO 25010:2011 resource-utilisation quantifies the overhead; the practical failure mode is a data table that renders 5,000 rows at once, consuming hundreds of megabytes of memory and making the page unusable on mid-range devices.

Replace full-render lists with a virtualizer that renders only the rows currently in the viewport. @tanstack/react-virtual is a solid zero-dependency option.

// components/data-table.tsx
import { useVirtualizer } from '@tanstack/react-virtual'

const virtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => containerRef.current,
  estimateSize: () => 40,
})

return (
  <div ref={containerRef} style={{ height: '500px', overflow: 'auto' }}>
    <div style={{ height: virtualizer.getTotalSize() }}>
      {virtualizer.getVirtualItems().map((vr) => (
        <div key={vr.key} style={{ position: 'absolute', top: vr.start }}>
          {rows[vr.index]}
        </div>
      ))}
    </div>
  </div>
)