React: How to implement infinite scrolling with Intersection Observer?

1import { useState, useEffect, useRef, useCallback } from "react";
2
3function InfiniteScroll() {
4  const [items, setItems] = useState<Item[]>([]);
5  const [loading, setLoading] = useState(false);
6  const [hasMore, setHasMore] = useState(true);
7  const observerRef = useRef<IntersectionObserver>();
8  const sentinelRef = useRef<HTMLDivElement>(null);
9
10  const loadMore = useCallback(async () => {
11    if (loading || !hasMore) return;
12    setLoading(true);
13
14    const newItems = await fetchItems(items.length);
15    setItems(prev => [...prev, ...newItems]);
16    setHasMore(newItems.length > 0);
17    setLoading(false);
18  }, [items.length, loading, hasMore]);
19
20  useEffect(() => {
21    observerRef.current = new IntersectionObserver(
22      (entries) => {
23        if (entries[0].isIntersecting) {
24          loadMore();
25        }
26      },
27      { threshold: 0.1, rootMargin: "100px" }
28    );
29
30    if (sentinelRef.current) {
31      observerRef.current.observe(sentinelRef.current);
32    }
33
34    return () => observerRef.current?.disconnect();
35  }, [loadMore]);
36
37  return (
38    <div>
39      {items.map(item => (
40        <div key={item.id} className="item">
41          {item.title}
42        </div>
43      ))}
44
45      {/* Sentinel element */}
46      <div ref={sentinelRef} style={{ height: 1 }} />
47
48      {loading && <div className="spinner">Loading...</div>}
49    </div>
50  );
51}

1function useInfiniteScroll(loadMore: () => Promise<void>, hasMore: boolean) {
2  const observerRef = useRef<IntersectionObserver>();
3  const sentinelRef = useCallback((node: HTMLDivElement | null) => {
4    if (observerRef.current) observerRef.current.disconnect();
5    if (!node || !hasMore) return;
6
7    observerRef.current = new IntersectionObserver((entries) => {
8      if (entries[0].isIntersecting) loadMore();
9    });
10    observerRef.current.observe(node);
11  }, [loadMore, hasMore]);
12
13  return sentinelRef;
14}
15
16// Usage
17const sentinelRef = useInfiniteScroll(fetchNextPage, hasNextPage);
18<div ref={sentinelRef} />