question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scroll lagging/slow performance

See original GitHub issue

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,

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
claudericcommented, Jul 2, 2017

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.

0reactions
Odin-Taifcommented, May 26, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is there a fix to the slow scrolling problem that arose after the ...
1.Type “Mouse properties” in start search · 2. Select “Mouse and touchpad settings” · 3. Select Roll the Mouse wheel to scroll as...
Read more >
How to Fix Scroll Lag on Chrome, Firefox, Edge and others
In this article, we will be exploring ways to smoothen out scroll lag across various browsers including Chrome, Firefox, Edge, Opera, Vivaldi, and...
Read more >
How to Fix a Choppy Page When Scrolling Down - Techwalla
Click the "Advanced" tab, check the box next to "Use Smooth Scrolling" under the Browsing header, and then select "OK." Step 4. Return...
Read more >
Computer suddenly slow and scrolling jagged on specific ...
Computer suddenly slow and scrolling jagged on specific applications · Reboot · Check resources usage (CPU, Mem, GPU, page faults) all were OK,....
Read more >
CollectionView - slow scrolling, laggy performance · Issue #8012
Description I have CollectionView with 200 items with 2 labels in each item, but scrolling performance is unacceptable.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found