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