the perf issue in the scenario that children nodes change frequently

[haoliangwu]

I believe the root cause is due to

react-perfect-scrollbar/src/scrollbar.js

Line 39 in f3bd7a8

this._ps.update();

.

the following is the perf screenshot of my company current project:

the business is related to real-time trading, so the children of order book component change frequently and I found this library always call this._ps.update() after its children changed. This will cause the whole page to recalculate style frequently and decrease the FPS.

Is there a better way to solve this? IMHO, the ps.update() is used to sync scroll container when the size or content of scroll container change, but maybe it is a little overwhelming to trigger it in each CDU lifecycle.

is it better to expose prop to indicate the meaning of bypassing this logic when we know our scroll container is fixed or just debounce it?

[haoliangwu]

I apply debounce logic into the fork version of this repo and using it to reduce the frequency of the sync logic, the perf screenshot is following:

[goldenyz]

@haoliangwu Thanks for reporting this issue. The reason to call ps.update() in componentDidUpdate is that in most cases, people change the children when using this component. You can make a HOC ScrollbarWrapper which wraps the PerfectScrollbar and extends the PureComponent to prevent from unexpected update. But you may need to call updateScroll if children changes.
If you do want this ps.update() logic with better performance, the debounce logic is really a good idea. Could you help to create a PR for it?

[haoliangwu]

@goldenyz

please do code review at #91 when you have free time. thx.