TanStack Virtual

Package: @tanstack/react-virtual (+ @tanstack/virtual-core, per-framework adapters) | Chapters: 20 (5 Getting Started + 1 Guide + 2 API + 12 Examples) | Generated: 2026-08-25

How to Use This Skill

• Without arguments: load Core Patterns below for the mental model shared across every framework adapter
• With a concept name: ask about dynamic size, sticky headers, infinite scroll, window virtualization, etc.; read the matching chapter
• With a chapter: ask for ch010; load that specific chapter
• Browse: ask "what chapters do you have?" to see the full index

When a topic is not covered in Core Patterns below, read the relevant chapter file before answering.

---

Core Patterns & Conventions

• TanStack Virtual is headless: the adapter calculates a visible range and item geometry, while your markup, CSS, positioning, and scroll container remain yours.
• Start with a scroll element that has a definite viewport size and overflow: auto. Give the inner element getTotalSize() along the virtualized axis and position rendered items absolutely.
• Create the virtualizer with count, getScrollElement, and estimateSize; render getVirtualItems() and use each item's key, index, start, and size.
• Use estimateSize as the initial geometry. For dynamic DOM content, attach ref={virtualizer.measureElement} and data-index to rendered items. Do not mix measureElement and resizeItem for the same index.
• Prefer stable domain keys via getItemKey when items can be prepended, removed, or reordered. Index keys identify positions, not records.
• overscan adds items outside the viewport. The examples use 5 for many lists, 6 for chat, and 20 for the table; tune it against scroll velocity, render cost, and blanking risk.
• Use two virtualizers for a grid: one vertical for rows and one horizontal for columns. Use lanes for masonry-like multi-lane layouts.
• Use paddingStart and paddingEnd for virtual content space. Use scrollPaddingStart and scrollPaddingEnd so imperative scrolling leaves fixed UI such as a header visible.
• For chat and reverse feeds, keep normal item order, use anchorTo: 'end', stable message keys, and followOnAppend. Prepending then preserves the user's visual anchor.
• For a page-level scroller, use useWindowVirtualizer and account for the list's page offset with scrollMargin.
• For sticky items, customize rangeExtractor to add the active sticky index to the default range, then render that item without its normal transform and with a higher zIndex.
• onChange(instance, sync) can drive non-React DOM updates for high-frequency scroll work. React-specific directDomUpdates and useFlushSync are opt-in trade-offs, not first-line requirements.

---

Chapter Index

Getting Started

#	Title	Key Concepts
ch001	Introduction	headless, Virtualizer, axes
ch002	Installation	adapters, packages, React 19
ch003	React Virtual	hooks, rendering, React options
ch004	Other Framework Adapters	Angular, Solid, Svelte, Vue, Marko
ch005	Text Measurement with Pretext	canvas measurement, caching, fonts

Guides

#	Title	Key Concepts
ch006	Chat	end anchoring, prepend, follow

API

#	Title	Key Concepts
ch007	Virtualizer	options, methods, measurement
ch008	VirtualItem	geometry, key, lane

Examples

#	Title	Key Concepts
ch009	Example: Fixed Size	rows, columns, grid
ch010	Example: Variable Size	estimates, lanes, grid
ch011	Example: Dynamic Size (measured)	measureElement, window
ch012	Example: Pretext Measurement	text sizing, cache
ch013	Example: Padding	paddingStart, paddingEnd
ch014	Example: Scroll Padding	measured header, scroll padding
ch015	Example: Sticky Items	rangeExtractor
ch016	Example: Infinite Scroll	loader row, fetch trigger
ch017	Example: Chat	anchorTo, streaming
ch018	Example: Smooth Scroll	scrollToFn
ch019	Example: Table	table rows, transforms
ch020	Example: Window Virtualization	window scroller, scrollMargin

---

Topic Index

• dynamic size -> ch005, ch007, ch011, ch012
• fixed size -> ch009
• grid -> ch001, ch009, ch010, ch011
• infinite scroll -> ch016
• lanes -> ch007, ch010
• measurement -> ch005, ch007, ch011, ch012
• padding -> ch013, ch014
• React adapter -> ch003
• scrolling -> ch006, ch007, ch018, ch020
• sticky items -> ch015
• table -> ch014, ch019
• window virtualization -> ch011, ch020

Supporting Files

• glossary.md - key terms with definitions
• patterns.md - reusable techniques and design patterns
• cheatsheet.md - quick decision rules and reference tables