Stop events for a brief moment

[saurabhnemade]

This could be a new feature altogether.

What I am looking for: I want to stop the intersection observer/callback from my component. I want to have programmatic start and stop with context/custom hook.
What currently happens: Currently on every scroll event intersection observer is triggered and is calling the callback function.

Here is one case:
Let's say we have layout of tabs and we are treating tab selection as a pointer to specific div element on page where we scroll to on click of tab.
On scroll of the page I can set tab's state but if I try to do programmatic scroll on page (i.e. on click of tab) it will trigger the intersection observer and in turn the callback.

To handle such situations we can introduce another local state and expose method that can update it (either true/false). Based on this new state we can decide whether to invoke the callback on intersection observer.

[roderickhsiao]

So what I saw the potential solution could be

1. programmatically connect/disconnect the intersection observer (which might be expensive in terms of performance and the parent component needs to handle edge cases of manually monitor the state)
2. as you mentioned, a flag to indicate invoking callback or not. However, I feel like as the caller component will have that local state passing either to the option (HOC) or using hook, will it be easier to just identify to skip the action inside your callback function instead.

you are purposing

const [shouldEnabled, setShouldEnabled] = useState(false);
const onEnterViewport = useCallback(() => {
  // your logic
}, []);
const props = { shouldInvokeCallback: shouldEnabled, onEnterViewport };
useInViewport(target, options, config, props);

and in useInViewport skip onEnterViewport if shouldInvokeCallback = false.
I think if we are not trying to remove intersection observer on your local state, it might make more sense that the callback handling this case

const [shouldEnabled, setShouldEnabled] = useState(false);
const onEnterViewport = useCallback(() => {
  if (!shouldEnabled) return;
  
}, [shouldEnabled]]);
const props = { onEnterViewport };
useInViewport(target, options, config, props);

How do you think