Verified:GitHub

tanstack-virtual

Virtualize large UI collections by rendering only visible items.

3|Updated May 11, 2026

Search Tags:#performance #tanstack #virtualization #infinite scrolling #UI rendering #dynamic measurement #react-virtual

Ready to run

npx skills add https://github.com/JeromyJSmith/lattice-platform --skill tanstack-virtual-jeromyjsmith

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/JeromyJSmith/lattice-platform/tree/main/.agents/skills/skills/tanstack-virtual
Command: npx skills add https://github.com/JeromyJSmith/lattice-platform --skill tanstack-virtual-jeromyjsmith

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Virtual prevents slow, laggy UIs by rendering only the items that are actually visible in large scrolling lists, grids, and tables instead of mounting thousands of DOM nodes.

Core Features & Use Cases

Viewport virtualization: Computes which items fall within the scroll viewport and renders just those, positioning them with absolute layout.
Dynamic sizing: Supports variable-height content using measurement hooks to avoid scroll jumps.
Advanced scrolling patterns: Handles horizontal virtualization, grid-style virtualization, infinite scrolling, sticky rows, and smooth scrolling behaviors.

Quick Start

Use the tanstack-virtual skill to generate a React virtualized list using useVirtualizer with count, a scroll container ref, estimateSize, and overscan tuned for smooth scrolling.

Frequently Asked Questions about tanstack-virtual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render huge lists in React without dropping below 60FPS?▼

Viewport-based virtualization solves slow UI rendering by computing which items fall within the scroll viewport and mounting only those DOM nodes, keeping huge lists smooth at 60FPS. It positions visible items using absolute layout to maintain scroll accuracy.

What's the best way to handle variable-height rows in a virtualized list?▼

Dynamic measurement handles variable-height rows in virtualized lists by using measurement hooks to calculate actual item dimensions. This prevents scroll jumps and ensures accurate positioning without requiring you to know exact heights upfront.

Can I use virtualization for grids, horizontal scrolling, and infinite loading?▼

Yes, virtualization supports grid-style layouts, horizontal scrolling, infinite loading, and sticky rows. It computes visible ranges for both vertical and horizontal axes, enabling smooth scrolling behaviors across complex UI collection patterns.

Do I need to provide an estimated size for every item to use virtualization?▼

You provide an estimateSize function to give the virtualizer initial dimensions before measurement, but exact sizes are not required for every item. Dynamic measurement hooks refine the actual sizes as items render, preventing scroll jumps and maintaining accuracy.

Why does my virtualized list scroll position jump or feel laggy?▼

Scroll position jumps or lag often occurs when estimateSize is misconfigured or dynamic measurement is not enabled for variable-height content. Correctly configuring count, getScrollElement, and estimateSize with appropriate overscan ensures accurate positioning and smooth scrolling.

Does viewport virtualization work with frameworks other than React?▼

Yes, viewport virtualization applies to React and other supported TS/JS frameworks. The virtualization logic is framework-agnostic, allowing you to render large UI collections smoothly across different JavaScript environments.