Is there an option to defer callback?

[zeroarst]

I'm not sure if "defer" is the right word here, but essentially, I use this library for a list where each item component relies on this hook. The list can sometimes contain over 100 items. I use the hook to hide content and boost performance by hiding elements that are not in view. However, there's an issue when users quickly scroll down and then back up, causing the hook to trigger multiple times.

I know I could adjust the rootMargin, but it's still not ideal for handling rapid scrolling through a large number of items. I could implement another state with a timer to manage this, like so:

  useEffect(() => {
    let timerId: NodeJS.Timeout | undefined
    if (!inView) {
      timerId = setTimeout(() => {
        setIsContentVisible(false)
        timerId = undefined
      }, 1000)
    } else {
      setIsContentVisible(true)
    }
    return () => {
      if (timerId) clearTimeout(timerId)
    }
  }, [inView, logger]);

But this approach would trigger an additional re-render apart from the useInView hook. It would be great if this functionality were built into the library. Do we have an option for this currently?

[thebuilder]

The IntersectionObserver api is async, so tid is more a question of React rendering optimization.

If performance is an issue, I'd recommend using the observe method directly, to manually create and destroy observers.

You can use a debounced value to defer/set it after a timeout. (Look up hooks for this)