overscanRowCount - Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices.

I have a list of chat messages. The message height depends on the content.

My code is below. And everything seems to work well, but there is one moment, I can’t find the "overscanRowCount" property. Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices.

Can you do something about the flicker?

const Message = ({ i }: any, ref: any) => {
    return (
        <div
            ref={ref}
            style={{
                border: "1px solid gray",
            }}
        >
            <Avatar />
            message {i}
            // Dynamic height by content
            {i % 2 ? <div style={{ height: 100 }} /> : null}
        </div>
    );
};
const ForwardMessage = React.forwardRef(Message);

const Chat = () => {
      const listRef = React.useRef<any>(null);
      const size = useSize();
  
      // Infinite scroll
      const onScroll = (e: any) => {
          if (e.target.scrollHeight - e.target.scrollTop === size?.height) {
              appendData();
          }
      };
    
        <VirtualList
            ref={listRef}
            data={data}
            height={size?.height}
            itemHeight={30}
            itemKey="email"
            onScroll={onScroll}
        >
            {(item: any, i: any) => <ForwardMessage i={i} {...item} />}
        </VirtualList>
  }

Start at the VirtualList entry point shown in the example and inspect how visible rows and dynamic item heights are handled. The issue names no file or test; done means exposing an overscanRowCount option and reducing flicker for chat messages whose heights depend on their content.