TanStack Virtual

Use this skill when work touches windowed rendering of long lists, grids, tables, feeds, or chat logs with @tanstack/react-virtual, or its framework-agnostic core @tanstack/virtual-core.

Workflow

1. Confirm the target before changing code:
   • Installed @tanstack/react-virtual and @tanstack/virtual-core versions (latest: 3.14.14 / 3.18.0, 2026-10-09), React version, and whether React Compiler is on. Older apps on 3.13.x lack anchorTo, directDomUpdates, and cancelScroll.
   • The scroller: inner element (useVirtualizer) or the page (useWindowVirtualizer).
   • Item sizing: fixed, known per index, or measured from the DOM.
   • Data shape: static array, paged or infinite query, prepend-able history, or grouped with sticky headers.
2. Refresh docs when versions or behavior matter. Start from source-map.md. Check for a v4 only through npm dist-tags; the v4 git branch is stale.
3. For install, hook choice, base markup, the options table, and the instance API, use setup-core.md.
4. For estimateSize, measureElement, dynamic heights, padding, gap, scrollMargin, and every scrollTo* method, use sizing-and-scrolling.md.
5. For horizontal lists, 2D grids, lanes and masonry, sticky items, window scrolling, and rangeExtractor, use layouts.md.
6. For chat, logs, reverse feeds, streaming output, useInfiniteQuery, and scroll restoration, use chat-and-infinite.md.
7. For TanStack Table rows, columns, and sticky headers, use table-integration.md.
8. For SSR, React 19, React Compiler, directDomUpdates, performance, accessibility, and tests, use production-patterns.md.
9. For a symptom to fix lookup, use troubleshooting.md.