Capability to clear the time interval after component viewable in the viewport

[anthlasserre]

Hey @thinhkhang97 👋🏼
Thanks a lot for this library, this is really helpful.

I have reversed-engineered this library and found an infinite interval running even after getting the success callback.
I was wondering if we could implement a prop like runOnce?: boolean in the ViewPortDetector component.

In that way. Once we have an onChange call with true as a new value, we won't call the onChange callback again and we're gonna clear the setInterval.

What are your thoughts?

I'm about to raise a PR with this suggestion

[thinhkhang97]

Thanks @anthlasserre for your suggestion. The interval in ViewPortDetector component will be cleared when the component be unmounted as return statement in useEffect. However, in a long list like a feed, the items may live longer so you're right to have a prop like runOnce to make sure it runs one time 👍.
But I have a question that, which the use cases do we just check the items just appear once in the viewport?

[anthlasserre]

Thanks @anthlasserre for your suggestion. The interval in ViewPortDetector component will be cleared when the component be unmounted as return statement in useEffect. However, in a long list like a feed, the items may live longer so you're right to have a prop like runOnce to make sure it runs one time 👍. But I have a question that, which the use cases do we just check the items just appear once in the viewport?

Thanks for your quick response. To clarify my use case. I have a big list of stats components and I want to run some animations only when the component is in the viewport. Once the component has played the animation, I no longer need to check if this component is still in the viewport.

[thinhkhang97]

I agree with you. But I have a question when I see your pr, does the runOnce work as the expectation without waiting for the children components completely render?