Chapter 2: Installation

Core Idea

Install the adapter for the framework that owns rendering, or install Virtual Core when integrating without a framework adapter. React applications generally begin with @tanstack/react-virtual.

Key Concepts

• React package: @tanstack/react-virtual.
• Solid package: @tanstack/solid-virtual.
• Svelte package: @tanstack/svelte-virtual.
• Vue package: @tanstack/vue-virtual.
• Angular package: @tanstack/angular-virtual.
• Marko package: @tanstack/marko-virtual.
• Lit package: @tanstack/lit-virtual.
• Virtual Core: @tanstack/virtual-core for a framework-neutral integration.
• React scheduling: useFlushSync: false can avoid React 19 scrolling warnings and may improve batching.

Code Examples

npm install @tanstack/react-virtual
npm install @tanstack/virtual-core

• What it demonstrates: Install the framework adapter or the framework-neutral core as a dependency.

Key Takeaways

1. Choose the adapter matching the rendering framework.
2. Use Virtual Core only when you need to build the integration yourself.
3. Installation alone does not create markup; the adapter still follows the headless rendering contract.
4. Consider useFlushSync: false for React 19 warnings, rapid-scroll performance, or non-critical lists.

Connects To

• Ch 003: The React adapter's hooks are the main entry point.
• Ch 004: Other adapters expose framework-native creation APIs.
• Ch 007: All adapters share Virtualizer concepts.