tanstack-virtual

Virtualize large React lists with fixed and variable item sizes.

6|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/fellipeutaka/denji --skill tanstack-virtual-fellipeutaka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-virtual
Source: https://github.com/fellipeutaka/denji/tree/main/.agents/skills/tanstack-virtual
Command: npx skills add https://github.com/fellipeutaka/denji --skill tanstack-virtual-fellipeutaka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables seamless rendering of large lists in React by virtualizing list items, significantly improving performance and user experience.

Core Features & Use Cases

  • List Virtualization: Virtualizes thousands of list items to prevent performance bottlenecks.
  • Infinite Scrolling: Supports dynamically loading data as the user scrolls.
  • Use Case: For example, rendering a feed of 10,000 search results smoothly without lag, enabling a performant infinite scroll experience.

Quick Start

Use the tanstack-virtual skill to efficiently render a list of 1000 items in a React component.

Frequently Asked Questions about tanstack-virtual

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

FAQPage Schema
How do I render large lists in React without freezing the browser?

List virtualization solves this by only rendering the visible items in the React viewport, significantly improving performance and user experience for large datasets.

Can I implement infinite scrolling with dynamic data loading in React?

Yes, infinite scrolling is supported by dynamically loading data as the user scrolls, enabling a performant experience for continuously growing feeds.

Does React virtual scrolling support variable item sizes and masonry layouts?

Yes, React virtual scrolling supports both fixed and variable item sizes, including multi-lane masonry layouts, ensuring smooth performance for complex list rendering.

What's the best way to display thousands of items in a React feed?

The best approach is list virtualization, which prevents performance bottlenecks by virtualizing thousands of list items to maintain smooth scrolling.

How does virtual scrolling improve React list rendering performance?

Virtual scrolling improves React list rendering by virtualizing list items, ensuring only the necessary elements are processed and kept in the DOM to prevent lag.