-
Notifications
You must be signed in to change notification settings - Fork 0
Virtualization
ABCrimson edited this page Mar 7, 2026
·
1 revision
The list component auto-virtualizes when the filtered item count exceeds a threshold (default: 100).
-
Detection — When
filteredCount > 100, virtualization activates automatically -
Measurement —
ResizeObservermeasures actual item heights - Windowing — Only visible items + overscan are rendered to the DOM
-
Positioning — Items are positioned with GPU-composited
translatetransforms -
Deferred measurement —
requestIdleCallbackmeasures items during idle periods
<Command.List virtualize={true} // Enable (default: true) estimateSize={44} // Initial estimated height per item overscan={8} // Extra items rendered outside viewport > {items} </Command.List>
<Command.List virtualize={false}> {/* All items rendered to DOM */} </Command.List>
The library uses these CSS properties for performance:
[data-command-item] { content-visibility: auto; contain-intrinsic-size: auto 44px; } [data-command-list-virtual] { position: relative; will-change: transform; }
| Items | Without Virtualization | With Virtualization |
|---|---|---|
| 100 | ~2ms render | ~2ms render (not activated) |
| 1,000 | ~20ms render | ~3ms render |
| 10,000 | ~200ms render | ~3ms render |
| 100,000 | Unusable | ~4ms render |