virtual-lists

SKILL.md

List Virtualization

Table of Contents

When to Use

When NOT to Use

Instructions

Details

Source

List virtualization (also known as windowing) is the idea of rendering only visible rows of content in a dynamic list instead of the entire list. The rows rendered are only a small subset of the full list with what is visible (the window) moving as the user scrolls. This can improve rendering performance.

If you use React and need to display large lists of data efficiently, you may be familiar with react-virtualized. It's a windowing library by Brian Vaughn that renders only the items currently visible in a list (within a scrolling "viewport"). This means you don't need to pay the cost of thousands of rows of data being rendered at once.

When to Use

Use this when rendering large lists or grids (hundreds/thousands of items) that cause performance issues

This is helpful for reducing initial render time and improving scroll performance