Fix useIntersectionObserver hook in infinite scroll example

[juliaschiller150]

Expected behavior

The load-more-infinite-scroll example in react-query only loads more results when the loadMoreButtonRef DOM element is within the viewport.

The problem

The load-more-infinite-scroll example in react-query loads results exhaustively, even when the loadMoreButtonRef DOM element is not within the viewport.

Root cause

The useIntersectionObserver hook, which uses useEffect under the hood, does not pass any dependencies as the second argument of useEffect; therefore, the hook's callback executes upon every render. This means the IntersectionObserver gets instantiated every render - which in turn means IntersectionObserver calls its callback every render, because IntersectionObserver's API specifies that the callback is called upon intersection and upon initial observation. Source: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concepts_and_usage

The fix

I've passed [target.current] as the second argument to useEffect in useIntersectionObserver, so it'll only re-execute when the current value of the useRef hook instance changes.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 17cf2b0

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	<1s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-09 20:05:07 UTC