tanstack-virtual
TanStack Virtual
Overview
TanStack Virtual is a headless UI utility for virtualizing large lists, grids, and tables. It renders only the visible items in the viewport, dramatically reducing DOM nodes and improving performance for datasets with thousands of rows. Framework adapters are available for React, Vue, Solid, Svelte, Lit, and Angular.
When to use: Rendering thousands of rows or columns, building virtualized tables, implementing infinite scroll, displaying large datasets where DOM node count impacts performance.
When NOT to use: Small lists under ~100 items (no performance benefit), server-rendered static content, layouts where all items must be in the DOM for SEO or accessibility, simple pagination (render one page at a time instead).
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Vertical list | useVirtualizer({ count, getScrollElement, estimateSize }) |
Wrap items in absolute-positioned container |
| Horizontal list | useVirtualizer({ horizontal: true, ... }) |
Use getTotalSize() for width instead of height |
| Grid layout | Row virtualizer + column virtualizer | Two virtualizer instances sharing one scroll element |
| Dynamic sizing | ref={virtualizer.measureElement} |
Set data-index on each element |
| Window scroller | useWindowVirtualizer({ count, estimateSize }) |
No getScrollElement needed |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
119knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78