Chapter 9: Example: Fixed Size

Core Idea

This example virtualizes fixed-height rows, fixed-width columns, and a two-axis grid. Because dimensions are known and never change, no DOM measurement is needed.

Code Example

const rowVirtualizer = useVirtualizer({
  count: 10000,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 35,
  overscan: 5,
})

{rowVirtualizer.getVirtualItems().map((virtualRow) => (
  <div
    key={virtualRow.index}
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: `${virtualRow.size}px`,
      transform: `translateY(${virtualRow.start}px)`,
    }}
  >
    Row {virtualRow.index}
  </div>
))}

• What it demonstrates: A fixed-size vertical list uses estimates directly for geometry and positioning.

Key Takeaways

1. Use fixed sizing when the rendered dimensions truly do not change.
2. The same source demonstrates horizontal and dual-axis variants.
3. Keep overscan small enough that fixed-size rendering stays cheap.

Connects To

• Ch 010: Variable data replaces one constant with per-index estimates.
• Ch 011: Dynamic content needs measurement.