Infinite Scroll via IntersectionObserver

import { useCallback, useRef } from 'react';
export function useInfiniteScroll(onLoadMore, hasMore) {
  const observer = useRef(null);
  return useCallback((node) => {
    observer.current && observer.current.disconnect();
    if (!node || !hasMore) return;
    observer.current = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) onLoadMore(); },
      { rootMargin: '200px' }
    );
    observer.current.observe(node);
  }, [onLoadMore, hasMore]);
}