Social Feed

Combine infinite scroll with dynamic item heights using measureElement:

const {
  virtualItems,
  totalSize,
  containerRef,
  handleScroll,
  measureElement,
  data: listData,
} = useVirtualList({
  data,
  getItemId: (item) => item.id,
  estimatedItemHeight: 140,
  onScrollToBottom: loadMore,
  scrollBottomThreshold: 300,
});

// In render, attach measureElement ref:
{virtualItems.map((vi) => (
  <div
    ref={measureElement}
    data-index={vi.index}
    style={{
      position: 'absolute',
      transform: `translateY(${vi.start}px)`,
    }}
  >
    <PostCard post={listData[vi.index]} />
  </div>
))}

The measureElement ref callback lets the virtualizer measure actual rendered heights, so items can have varying sizes.