Scroll lagging/slow performance

Hi,

This looks like a great little add on (only 3kb’s!).

I’m having some difficultly implementing. I tried following your example, but had no success. T

I had some success. But performance isn’t great. The scroll is laggy. I’ve probably implemented it wrong.

See here https://codesandbox.io/s/vo1xjpxrL

Here’s the code:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      demoData: x.demoData,
    };
  }
  render() {
    return (
        <VirtualList
    width='100%'
    height={800}
    itemCount={this.state.demoData.length}
    itemSize={50}
    renderItem={({index, style}) =>
      <div style={style} key={index}> 
{this.state.demoData.map(e => {
          return <Result e={e}/>;
        })[index]}
      </div>
    }
  />

    );
  }
}

class Result extends React.Component {
  render() {
    const { e, remove } = this.props;

    return (
      <div key={e.id}>
        {e.name} {' '} {e.id}
      </div>
    );
  }
}

Cheers,

[clauderic]

Right off the bat, your renderItem prop should be a class method, otherwise a new function gets re-created every single time render() is called, which in turn causes VirtualList to re-render, since it’s props change when that happens.

Depending on how complex your rows are though, it’s possible this is just a limitation with React. I see you’re mapping multiple results per row, so depending on how many results you’re mapping, this could be a source of performance issues.

You can also try lowering the overscanCount prop to reduce the number of rows that are rendered on screen.

[Odin-Taif]

Check if you have

 html{
  scroll-behavior: smooth;
}

in your index.css or somewhere if so then delete it because, it causes some issues with react-scrolling.