React Virtualized - 滚动一长串列表后屏幕变黑

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>
  );
}