3

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.

enter image description here

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.

Lucifer
  • 1,069
  • 4
  • 16
  • 26
  • It would be helpful if you had kept the codesanbox link up, I am having a similar issue and want to see what you had vs. what the answerer showed. – MattoMK Feb 02 '22 at 22:42

1 Answers1

2

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>
  );
}
Lafi
  • 1,310
  • 1
  • 15
  • 14