skills.rest
janpeterd
janpeterdCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-virtual

Virtualize viewport-visible items in large React lists with TanStack Virtual.

Updated Jul 2, 2025
Search Tags:#performance#react#virtualization#infinite scrolling#frontend ui#dynamic measurement#virtual lists
One-click install
npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-virtual-janpeterd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/janpeterd/dotfiles/tree/main/dot_agents/skills/tanstack-virtual
Command: npx skills add https://github.com/janpeterd/dotfiles --skill tanstack-virtual-janpeterd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Virtual solves the performance bottleneck of rendering large element lists by ensuring only the items visible in the viewport are mounted in the DOM.

Core Features & Use Cases

  • Viewport-based virtualization: Renders only the visible subset of items and positions them using absolute/fixed layout math.
  • Variable-size support: Uses measurement (measureElement) to handle rows/cards with dynamic heights without jumpy scroll.
  • Advanced list patterns: Supports horizontal virtualization, grids (multi-row/column via multiple virtualizers), window scrolling, infinite loading, sticky items, and smooth scrolling control.

Use case example: Build an admin table with 50,000 rows where each row height can vary; virtualization keeps scrolling at 60FPS while accurately measuring and rendering only what the user can see.

Quick Start

Use the tanstack-virtual Skill to configure useVirtualizer with count, getScrollElement, and an estimateSize function to virtualize your large list.

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 smoothly in React without scroll jank?▼

To render huge lists smoothly in React, use viewport-based virtualization to mount only the visible items in the DOM. This prevents slow DOM rendering and scroll jank by positioning items using absolute layout math.

Can I virtualize React lists with variable row heights?▼

Yes, you can virtualize React lists with variable row heights by using the measureElement function. This handles dynamic measurement for rows or cards without causing jumpy scrolling behavior.

What is the best way to build an infinite scrolling UI for large datasets?▼

The best way to build an infinite scrolling UI for large datasets is using a virtualizer that supports infinite loading. It computes virtual items and total scroll size while rendering only the viewport-visible subset.

Does TanStack Virtual support grid layouts and horizontal scrolling?▼

Yes, TanStack Virtual supports grid layouts and horizontal scrolling. You can achieve multi-row or multi-column grids by configuring multiple virtualizers, and it also handles window-based scrolling.

How do I configure useVirtualizer for a 50,000 row admin table?▼

To configure useVirtualizer for a 50,000 row admin table, provide the item count, a scroll element provider, and an estimateSize function. This keeps scrolling at 60FPS by rendering only what the user sees.

Related Skills

Explore More Software Engineering Skills→
TaherMustansir1929TaherMustansir1929

tanstack-virtual

Virtualize large lists and grids to render only visible items.

Community
Intermediate
JeromyJSmithJeromyJSmith
3

tanstack-virtual

Virtualize large UI collections by rendering only visible items.

Community
Intermediate
jcsoftdevjcsoftdev

virtual-lists

Implement windowing to render only visible items in large React lists.

Community
Intermediate
petyosipetyosi
6.4k

react-virtuoso

Virtualize large lists, grids, and tables in React with automatic item size measurement.

Community
Advanced