docs: infinite scroll example uses react-intersection-observer (TanStack#3410)

Author: lironezra

examples/load-more-infinite-scroll/hooks/useIntersectionObserver.js

@@ -9,6 +9,7 @@
     "next": "9.3.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
+    "react-intersection-observer": "^8.33.1",
     "react-query": "^3.5.0"
   },
   "scripts": {

examples/load-more-infinite-scroll/package.json

@@ -1,14 +1,10 @@
 import React from 'react'
 import Link from 'next/link'
 import axios from 'axios'
-
+import { useInView } from 'react-intersection-observer'
 import { useInfiniteQuery, QueryClient, QueryClientProvider } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
 
-//
-
-import useIntersectionObserver from '../hooks/useIntersectionObserver'
-
 const queryClient = new QueryClient()
 
 export default function App() {
@@ -20,6 +16,8 @@ export default function App() {
 }
 
 function Example() {
+  const { ref, inView } = useInView()
+
   const {
     status,
     data,
@@ -38,18 +36,16 @@ function Example() {
       return res.data
     },
     {
-      getPreviousPageParam: firstPage => firstPage.previousId ?? false,
-      getNextPageParam: lastPage => lastPage.nextId ?? false,
+      getPreviousPageParam: firstPage => firstPage.previousId ?? undefined,
+      getNextPageParam: lastPage => lastPage.nextId ?? undefined,
     }
   )
 
-  const loadMoreButtonRef = React.useRef()
-
-  useIntersectionObserver({
-    target: loadMoreButtonRef,
-    onIntersect: fetchNextPage,
-    enabled: !!hasNextPage,
-  })
+  React.useEffect(() => {
+    if (inView) {
+      fetchNextPage()
+    }
+  }, [inView])
 
   return (
     <div>
@@ -91,7 +87,7 @@ function Example() {
           ))}
           <div>
             <button
-              ref={loadMoreButtonRef}
+              ref={ref}
               onClick={() => fetchNextPage()}
               disabled={!hasNextPage || isFetchingNextPage}
             >