VirtualListFlow

Same external API as VirtualList, but items render in CSS normal flow instead of being taken out of flow and positioned individually. Use this variant when virtualization needs to coexist with position: sticky inside items, CSS gap, or any other layout rule that depends on items participating in the document's flow.

Why a second variant

In the original VirtualList, items don't participate in the document's normal flow, so layout rules that depend on flow behave differently: position: sticky inside an item pins to that item rather than the outer scroll container, and CSS gap / margin between items has to be baked into each item's own padding.

VirtualListFlow keeps the same windowing behavior but renders items in normal flow, so sticky, gap, and browser scroll anchoring work the way they do in a non-virtual list. The trade-off is a slightly heavier repositioning cost on scroll — usually well worth it for lists of cards or sections with layered structure inside them.

When to pick which

If a list doesn't need any of the flow-side wins, VirtualList is fine and slightly cheaper. For any list of cards, sections, or items with sticky/layered structure inside them, prefer VirtualListFlow.

Fixed height

Pass itemHeight as a number (px).

Dynamic height

Pass itemHeight="dynamic" for content-driven heights. Each item is measured after it renders. Use estimatedItemHeight to set the initial layout estimate; the scroll position stays stable when measured heights replace estimates.

Infinite scroll

Pass hasMore, loadingMore, and onLoadMore. The callback fires when the scroll position is within loadMoreThreshold px (default 80) of the bottom.

Props

VirtualListFlow re-exports the same VirtualListProps type as VirtualList, so callers can swap one for the other without rewriting JSX. The style argument passed to the children render fn is just { width: '100%' } (plus height in fixed mode) — no positioning information, because items are in normal flow and don't need any.