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.

import { Virtuoso } from 'react-virtuoso'
import { useState, FC } from 'react'

export default function App() {
  const [isScrolling, setIsScrolling] = useState(false)
  return (
    <Virtuoso
      style={{ height: '100%' }}
      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>
        )
      }}
    />
  )
}

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

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