Live Updates

Prepend new items to the top with automatic scroll anchoring — the viewport stays in place while new content arrives.

30 messages · New messages prepend with scroll anchoring

Just prepend to the data array. The hook detects the ID change and adjusts scroll position automatically:

const [data, setData] = useState(initialItems);

// Prepend a new item:
setData((prev) => [newItem, ...prev]);

const { virtualItems, containerRef } = useVirtualList({
  data,
  getItemId: (item) => item.id,
  estimatedItemHeight: 72,
});

The hook tracks the first item’s ID. When it changes and the data grows, it adjusts scrollTop so the previously visible items remain in place.

Use the buttons in the demo to add messages manually or enable auto-add mode to simulate a live feed.