clauderic / clauderic/react-tiny-virtual-list

Perf

Open
#45 8 comments 4 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
2.5k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

Hi @clauderic, thanks for this library!

I'm having a few performance issues which seem to be caused by `onScroll` triggering a setState which triggers a re-render. Here's a capture of scrolling through a list with a `renderItem` that only render simple `Hi`-items:

![image](https://user-images.githubusercontent.com/876086/36972562-dad5ce3e-206f-11e8-9970-a072900bf7b3.png)

For reference, this is using the dev build of React 15.6.1, with 6x CPU slowdown.

This can be improved by adding the scroll listener as a passive event listener instead of using `onScroll` (AFAIK React does not support specifying events as passive using `on*`-props, so it must be set up in `componentDidMount`).

Additionally, to increase performance even more the `VirtualList` component could support a `debounce`-prop, which takes a number of milliseconds to debounce the `handleScroll` method with.

Would you be interested in a PR for this?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.