Support for controlling debounce time
Closed this issue · 4 comments
Seems you cant control the debounce time of via a prop:
react-lazy/src/lib/viewport.js
Line 81 in 889e7af
Probably should be exposed as sometimes you want it to be higher / lower depending on use case.
I know you can use this method: https://github.com/Merri/react-lazy#checkelementsinviewport but this seems a bit clunky, should be an exposed prop instead
I am happy to throw up a PR if you think this sounds reasonable
I guess the main issue is that this is currently a global setting: it will have effect on all components and all calls to checkElementsInViewport
at once, which means mixed use cases would conflict. The reason for having just one method for the job has been performance (minimize use of event listeners and memory).
The problem is that if you add config option on component basis you end up with a lot of event listeners (one per component), unless you do some clever coding. One way to limit this is to provide something like a function to generate a component which instances share the same config and thus use the same set of event listeners (instead each having it's own set of those).
There is also the question whether some people would want to use throttle instead. Also, someone might want to customize which window
events should be listened to. Doing these would sacrifice some simplicity of the current component for giving power for further configuration and customization.
Of course, it would be simple just to allow for setting the global value and be happy with that :)
(Disclaimer: this was written just before going to bed)
Thoughts on an option to throttle instead of debounce? (slightly off topic)
I added the throttle
method some months ago and also made the hard coded 50ms debounce time adjustable by using a setting. Unfortunately the PR still got no feedback... 🤔#21
v1.0.0 with IntersectionObserver has been released, which removes this issue entirely.