Scroll Handling

Loading and rendering complex content while scrolling affects the scrolling performance.

To address that, the Virtuoso component exposes a isScrolling event property which gets called when the user starts/stops scrolling. The callback receives true when the user starts scrolling and false shortly after the last scroll event.

Handling this event can improve performance by hiding/replacing certain heavy elements in the items.

Live Editor

function App() {
  const [isScrolling, setIsScrolling] = useState(false);
  return (
    <Virtuoso
      style={{ height: 400 }}
      totalCount={1000}
      context={{ isScrolling }}
      isScrolling={setIsScrolling}
      itemContent={(index, user, { isScrolling }) => {
        return (
          <div style={{ padding: '1rem 0', alignItems: 'center', display: 'flex', flexDirection: 'row' }} >
            <div style={{ margin: '1rem' }}>
              {isScrolling ? <AvatarPlaceholder /> : <Avatar /> }
            </div>

            <div>
              Item {index}
            </div>
          </div>
        )
      }}
    />
  )
}

function Avatar () {
  return (
    <div style={{
        backgroundColor: 'blue',
        borderRadius: '50%',
        width: 50,
        height: 50,
        paddingTop: 13,
        paddingLeft: 14,
        color: 'white',
        boxSizing: 'border-box'
      }}>AB</div>
  )
}

function AvatarPlaceholder({text }) {
return (<div style={{
        backgroundColor: '#eef2f4',
        borderRadius: '50%',
        width: 50,
        height: 50,
    }}>{text}</div>)
}


render(<App />)

Result