Handling scrolling

Loading and rendering images while scrolling ruins the scrolling performance.

To deal with this, the Virtuoso component emits scrollingStateChange 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 be used to optimize performance by hiding/replacing certain elements in the items.

In the example above, the image avatars are replaced with placeholders when the user starts scrolling.

import React, { useState } from 'react'
import { Virtuoso } from 'react-virtuoso'
import { getUser } from './FakeData'
import {
  ExampleListItem,
  ExampleAvatar,
  ExampleUserInfo,
  ExampleImgAvatar,
} from './ExampleComponents'

export default () => {
  const [isScrolling, setIsScrolling] = useState(false)

  return (
    <Virtuoso
      style={{
        height: '400px',
        width: '350px',
      }}
      totalCount={100}
      scrollingStateChange={scrolling => {
        setIsScrolling(scrolling)
      }}
      item={index => {
        const user = getUser(index)
        const title = `${index + 1}. ${user.name}`
        return (
          <ExampleListItem even={index % 2 === 0}>
            {isScrolling ? (
              <ExampleAvatar style={{ backgroundColor: '#ccc' }}>
                &nbsp;
              </ExampleAvatar>
            ) : (
              <ExampleImgAvatar src={user.avatar} />
            )}

            <ExampleUserInfo title={title}>
              {user.description}
            </ExampleUserInfo>
          </ExampleListItem>
        )
      }}
    />
  )
}