diff --git a/src/hook/useObserver.js b/src/hook/useObserver.js new file mode 100644 index 0000000..4bb9e07 --- /dev/null +++ b/src/hook/useObserver.js @@ -0,0 +1,28 @@ +import React, { useCallback, useEffect, useRef } from 'react'; + +export default function useObserver(hasNextPage, fetchNextPage, isLoading) { + const observerRef = useRef(); + + const handleIntersection = useCallback( + (entries) => { + const [target] = entries; + if (target.isIntersecting && hasNextPage) { + fetchNextPage(); + } + }, + [fetchNextPage, hasNextPage], + ); + + useEffect(() => { + const element = observerRef.current; + if (!element) return + const options = { threshold: 0 }; + const observer = new IntersectionObserver(handleIntersection, options); + if (element) { + observer.observe(element); + return () => observer.disconnect(); + } + }, [fetchNextPage, handleIntersection, isLoading]); + + return observerRef; +}