React Virtualized - Screen going blank after scrolling a long list of itsm

Question

I'm working on a long list of items. For that I'm using react-virtualized (https://github.com/bvaughn/react-virtualized). But I'm facing the below issue.

When I try scrolling to the bottom for 2 seconds, it's blank then data is loading. It's not very smooth. This https://2v9j5.csb.app/ is the CodeSandBox link.

Answer 1

As I inspected in this use case we shouldn't remount the root div for the rowRenderer : <div key={key} style={style}> on scrolling as used on the docs, so this should fix the performance problem :

function rowRenderer({ key, index, isScrolling, style }) {
  const content = isScrolling ? (
    <div>Scrolling...</div>
  ) : (
    <ListItem idx={index} item={airports[index]} />
  );
  return (
    <div key={key} style={style}>
      {content}
    </div>
  );
}