skills.rest
yehezkieldio
yehezkieldioCOMMUNITY
Explore all skills by this author →
𝕏@yhezkieldioGitHub

tanstack-virtual

Implements virtualized rendering of large lists, grids, and tables in React applications.

Updated Aug 15, 2025
Search Tags:#performance#react#tanstack#virtualization#grid#infinite scroll#large lists
One-click install
npx skills add https://github.com/yehezkieldio/topaz --skill tanstack-virtual-yehezkieldio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/yehezkieldio/topaz/tree/main/.agents/skills/tanstack-virtual
Command: npx skills add https://github.com/yehezkieldio/topaz --skill tanstack-virtual-yehezkieldio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-virtual, @tanstack/virtual-core.

What problem does it solve? Rendering thousands of DOM nodes for large lists or tables causes slow rendering and janky scrolling. This Skill provides the patterns and API reference for TanStack Virtual, which renders only visible items to keep DOM node count minimal regardless of dataset size. ## Core Features & Use Cases - List and Grid Virtualization: Render only viewport-visible rows and columns using useVirtualizer with absolute positioning and transform-based placement. - Dynamic Heights and Window Scrolling: Measure variable-height items with measureElement and virtualize full-page scrolling with useWindowVirtualizer. - Advanced Patterns: Combine with infinite queries for endless feeds, pin sticky headers via rangeExtractor, and customize smooth scrolling with scrollToFn. - Use Case: You have a library of 10,000 book entries in a Next.js app. Use this Skill to virtualize the list so only ~20 rows exist in the DOM at any time, keeping scrolling at 60FPS. ## Quick Start Virtualize my React list of 10,000 items using TanStack Virtual with dynamic row heights and an overscan of 5.

Frequently Asked Questions about tanstack-virtual

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

FAQPage Schema
How do I virtualize a large list in React?▼

Use useVirtualizer from @tanstack/react-virtual with a scroll container ref, item count, and estimateSize. Render virtualizer.getVirtualItems() as absolutely positioned elements translated by each item's start offset inside a container sized to getTotalSize().

How to handle dynamic row heights with TanStack Virtual?▼

Attach virtualizer.measureElement as a ref to each row and add a data-index attribute set to the item index. Do not set a fixed height on measured items; provide an overestimated estimateSize so the virtualizer can correct measurements as items render.

Does TanStack Virtual support infinite scrolling?▼

Yes, it pairs with useInfiniteQuery from TanStack Query. Watch the last virtual item's index and call fetchNextPage when it approaches the end of loaded data, adding one extra count slot for a loading row while more pages exist.

Can I use TanStack Virtual for grid or table layouts?▼

Yes, create two virtualizers: one vertical for rows and one horizontal for columns sharing the same scroll element. Render cells at the intersection of visible row and column ranges using translateX and translateY positioning.

Why does my virtualized list show blank items while scrolling fast?▼

Blank flashes occur when overscan is too low for scroll speed. Increase overscan to 3-5 extra items, and ensure estimateSize overestimates rather than underestimates item heights to avoid scroll position jumps.

Related Skills

Explore More Software Engineering Skills→
bovinphangbovinphang
21

fec-list-virtualization

Virtualize large DOM lists in React, Vue, or other frameworks.

Community
Advanced
jiaiyanjiaiyan
8

n-select

Render single or multi-select dropdowns with search, grouping, and virtual scrolling.

Community
Intermediate
nklischnklisch
7

tanstack-query-v5

Reference TanStack Query v5 hooks for React server state management.

Community
Basic
janpeterdjanpeterd

tanstack-virtual

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

Community
Intermediate