Endless Scrolling

The endReached callback can be used to automatically load more items when the user scrolls to the bottom of the list. If you would like to load items more aggressively, you can increase the overscan value.

Scroll fast to the bottom of the list to see additional items being loaded.

import React, {
  useState,
  useRef,
  useCallback,
  useEffect,
} from 'react'
import { Virtuoso } from 'react-virtuoso'
import { getUser } from './FakeData'
import { UserItem } from './ExampleComponents'

const GenerateItem = index => {
  return <UserItem user={getUser(index)} index={index} />
}

export default () => {
  const [total, setTotal] = useState(0)
  const items = useRef([])
  const loading = useRef(false)

  // the setTimeout below simulates a network request.
  // In the real world, you can fetch data from a service.
  // the setTotal call will trigger a refresh for the list,
  // so make sure you call it last
  const loadMore = useCallback(() => {
    if (loading.current) {
      return
    }
    loading.current = true

    setTimeout(() => {
      for (let index = total; index < total + total + 20; index++) {
        items.current = [...items.current, getUser(index)]
      }
      loading.current = false
      setTotal(items.current.length)
    }, 500)
  }, [])

  useEffect(() => {
    loadMore()
  }, [])

  return (
    <Virtuoso
      style={{ width: '350px', height: '400px' }}
      overscan={500}
      totalCount={total}
      item={GenerateItem}
      endReached={() => loadMore()}
      footer={() => {
        return (
          <div style={{ padding: '2rem', textAlign: 'center' }}>
            Loading...
          </div>
        )
      }}
    />
  )
}