Machine Coding: Infinite Scroll with IntersectionObserver

1import React, { useState, useEffect, useRef, useCallback } from 'react';
2
3interface InfiniteScrollProps<T> {
4  fetchPage: (page: number) => Promise<{ items: T[]; hasMore: boolean }>;
5  renderItem: (item: T, index: number) => React.ReactNode;
6}
7
8export function InfiniteScroll<T>({ fetchPage, renderItem }: InfiniteScrollProps<T>) {
9  const [items, setItems] = useState<T[]>([]);
10  const [page, setPage] = useState(1);
11  const [loading, setLoading] = useState(false);
12  const [hasMore, setHasMore] = useState(true);
13
14  // Sentinel DOM element observed at the end of the list
15  const sentinelRef = useRef<HTMLDivElement>(null);
16
17  const loadMore = useCallback(async () => {
18    if (loading || !hasMore) return;
19
20    setLoading(true);
21    try {
22      const response = await fetchPage(page);
23      setItems((prev) => [...prev, ...response.items]);
24      setHasMore(response.hasMore);
25      setPage((prev) => prev + 1);
26    } catch (err) {
27      console.error('Failed to load next page:', err);
28    } finally {
29      setLoading(false);
30    }
31  }, [page, loading, hasMore, fetchPage]);
32
33  // Attach IntersectionObserver to sentinel
34  useEffect(() => {
35    const sentinel = sentinelRef.current;
36    if (!sentinel || !hasMore) return;
37
38    const observer = new IntersectionObserver(
39      (entries) => {
40        const firstEntry = entries[0];
41        // When sentinel scrolls into viewport and not currently loading, fetch next page
42        if (firstEntry.isIntersecting && !loading) {
43          loadMore();
44        }
45      },
46      { rootMargin: '200px' } // Pre-fetch 200px before user actually reaches bottom!
47    );
48
49    observer.observe(sentinel);
50
51    return () => {
52      observer.disconnect(); // Prevent memory leaks
53    };
54  }, [loadMore, hasMore, loading]);
55
56  return (
57    <div className="infinite-scroll-container">
58      <div className="items-list">
59        {items.map((item, index) => renderItem(item, index))}
60      </div>
61
62      {/* Sentinel element placed at bottom of list */}
63      <div ref={sentinelRef} className="sentinel" style={{ height: '20px' }}>
64        {loading && <p>Loading more items...</p>}
65        {!hasMore && items.length > 0 && <p>You have reached the end of the feed.</p>}
66      </div>
67    </div>
68  );
69}