Infinite-Scroll Feed with a React IntersectionObserver Hook and Cursor Pagination

import { useCallback, useRef, useState } from "react";

export interface Page<T> {
  items: T[];
  nextCursor: string | null;
}

export type FetchPage<T> = (cursor: string | null) => Promise<Page<T>>;

export function useInfiniteFeed<T>(fetchPage: FetchPage<T>) {
  const [items, setItems] = useState<T[]>([]);
  const [error, setError] = useState<Error | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const cursorRef = useRef<string | null>(null);
  const loadingRef = useRef(false);

  const loadMore = useCallback(async () => {
    if (loadingRef.current || !hasMore) return;

    loadingRef.current = true;
    setIsLoading(true);
    setError(null);

    try {
      const page = await fetchPage(cursorRef.current);
      setItems((prev) => [...prev, ...page.items]);
      cursorRef.current = page.nextCursor;
      setHasMore(page.nextCursor !== null);
    } catch (err) {
      setError(err instanceof Error ? err : new Error("Failed to load feed"));
    } finally {
      loadingRef.current = false;
      setIsLoading(false);
    }
  }, [fetchPage, hasMore]);

  return { items, error, isLoading, hasMore, loadMore };
}

import { useEffect } from "react";
import { useIntersectionObserver } from "./useIntersectionObserver";
import { FetchPage, useInfiniteFeed } from "./useInfiniteFeed";

interface FeedProps<T> {
  fetchPage: FetchPage<T>;
  renderItem: (item: T, index: number) => React.ReactNode;
}

export function Feed<T>({ fetchPage, renderItem }: FeedProps<T>) {
  const { items, error, isLoading, hasMore, loadMore } = useInfiniteFeed(fetchPage);
  const { ref, isIntersecting } = useIntersectionObserver({ rootMargin: "400px" });

  useEffect(() => {
    if (isIntersecting) loadMore();
  }, [isIntersecting, loadMore]);

  return (
    <div className="feed">
      <ul className="feed__list">
        {items.map((item, i) => (
          <li key={i} className="feed__item">
            {renderItem(item, i)}
          </li>
        ))}
      </ul>

      {error && (
        <div className="feed__error">
          <span>{error.message}</span>
          <button onClick={() => loadMore()}>Retry</button>
        </div>
      )}

      {isLoading && <div className="feed__spinner">Loading…</div>}

      {hasMore ? (
        <div ref={ref} className="feed__sentinel" aria-hidden="true" />
      ) : (
        <div className="feed__end">You're all caught up.</div>
      )}
    </div>
  );
}