How to avoid intersections triggering twice in child component after state update with Redux?

[akelsch]

Hi!

I have an issue with implementing infinite scroll using react-intersection-observer and Redux. So I pass an list of objects and a callback to update the Redux state to my component in which I want to observe. The problem is, that after calling the Redux callback, the parent component re-renders and inView remains true so the callback is called again. As a consequence, state gets updated twice instead of once.

As a workaround, I memorize the entry causing the update and skip subsequent updates if it has not changed (see below).

// reduxCallback: useCallback(() => dispatch(myAction(someParam)), [dispatch, someParam])
function MyComponentList({ myObjects, reduxCallback }) {
  const [sentinel, inView, entry] = useInView();
  const entryRef = useRef(entry);

  useEffect(() => {
    if (inView) {
      // workaround?
      if (entryRef.current !== entry) {
        entryRef.current = entry;
        if (myObjects.length < 50) {
          reduxCallback();
        }
      }
    }
  }, [inView, entry, myObjects, reduxCallback]);

  const myComponents = myObjects.map(({ some_key }) => (
    <MyComponent
      key={some_key}
      // ...
    />
  ));

  myComponents.push(<div key="sentinel" ref={sentinel} />);

  return <div>{myComponents}</div>;
}

Now, scrolling the list works and causes a single update. But this workaround causes issues when scrolling to the end of the list and reloading the page. You will not be brought back to the end of the list because it only loads one more page as the entry does not change. That is better than a broken mouse scroll but still somehow broken.

Maybe someone has a suggestion to fix this issue? Thanks.

[thebuilder]

The inView value is just a simple boolean flag to indicate if the element is currently inside the viewport. Consider looking at the entry object instead, since that will be updated when a new intersection event is triggered (and not including the inView value in your useEffect).

It might make sense to use the <InView> component instead, with an onChange handler that triggers a callback function.

Ensuring the page is restored when navigating back is a different issue. I'd solve it by replacing the history state with the current page, so you can read that on the initial render.

[thebuilder]

You should have a loading state of sorts, to prevent it from trigger a new fetch.

Consider setting a new key on the sentinel after inView is triggered, as this will force a new IntersectionObserver to be created (and resetting the inView).