Merri/react-lazy

Support for controlling debounce time

Closed this issue · 4 comments

Seems you cant control the debounce time of via a prop:

(hard coded at 50)

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

Merri commented

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

Merri commented

v1.0.0 with IntersectionObserver has been released, which removes this issue entirely.