Scroll lagging/slow performance
See original GitHub issueHi,
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:
- Created 6 years ago
- Reactions:1
- Comments:5 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Right off the bat, your
renderItem
prop should be a class method, otherwise a new function gets re-created every single timerender()
is called, which in turn causesVirtualList
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.Check if you have
in your index.css or somewhere if so then delete it because, it causes some issues with react-scrolling.