TanStack Virtual — Headless UI for Virtualizing Large Lists

Introduction

TanStack Virtual is a headless virtualization library that renders only the visible portion of large lists, tables, and grids. It keeps DOM node count low regardless of data size, preventing performance degradation when scrolling through thousands or millions of rows.

What TanStack Virtual Does

• Virtualizes vertical lists, horizontal lists, and 2D grids
• Renders only visible items plus a configurable overscan buffer
• Supports dynamic row heights with automatic measurement
• Works with React, Vue, Solid, and Svelte via framework adapters
• Provides smooth scrolling with estimated sizes and measurement callbacks

Architecture Overview

The core virtualizer is a framework-agnostic state machine that tracks the scroll container, calculates which items are visible, and returns measurement data. Framework adapters like @tanstack/react-virtual wrap this core with hooks or composables. The library does not render any DOM — it returns positional data (offset, size, index) that you apply to your own elements, making it fully headless.

Self-Hosting & Configuration

• Install the adapter for your framework: @tanstack/react-virtual, @tanstack/vue-virtual, etc.
• Provide a scroll container ref, item count, and an estimateSize function
• Map over virtualizer.getVirtualItems() to render only visible rows
• Position items absolutely using the start offset from each virtual item
• Enable measureElement for dynamic sizes that adjust after render

Key Features

• Renders only visible items for lists of any size without lag
• Supports variable and dynamic item heights with auto-measurement
• Horizontal and grid virtualization for two-dimensional layouts
• Headless design gives full control over markup and styling
• Tiny bundle size with zero dependencies beyond the TanStack core

Comparison with Similar Tools

• react-window — React-only, with fixed and variable size list components; TanStack Virtual is headless and multi-framework
• react-virtualized — older, larger library with many features; TanStack Virtual is lighter and more modern
• vue-virtual-scroller — Vue-specific; TanStack Virtual supports Vue, React, Solid, and Svelte
• Virtua — newer alternative with similar goals; TanStack Virtual has deeper TanStack ecosystem integration
• Native scroll — works for small lists but chokes on 10K+ items; virtualization is essential at scale

FAQ

Q: What frameworks are supported? A: React, Vue, Solid, and Svelte each have dedicated adapter packages.

Q: Can I virtualize a grid? A: Yes. Create two virtualizers (row and column) and combine their measurements for 2D virtualization.

Q: Does it handle dynamic row heights? A: Yes. Pass measureElement to measure items after rendering and the virtualizer adjusts automatically.

Q: How does it compare to react-window? A: TanStack Virtual is headless, supports multiple frameworks, and handles dynamic sizes more naturally.

Sources

• https://github.com/TanStack/virtual
• https://tanstack.com/virtual