IntersectionObserver infinite scroll hook

import { useCallback, useEffect, useRef, useState } from "react";
import { useIntersection } from "./useIntersection";

export interface Page<T> {
  items: T[];
  hasMore: boolean;
}

type Fetcher<T> = (page: number) => Promise<Page<T>>;

export function useInfiniteScroll<T>(fetchPage: Fetcher<T>) {
  const [items, setItems] = useState<T[]>([]);
  const [page, setPage] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  const loadingRef = useRef(false);

  const { ref: sentinelRef, entry } = useIntersection({ rootMargin: "200px" });

  const loadMore = useCallback(async () => {
    if (loadingRef.current || !hasMore) return;
    loadingRef.current = true;
    setLoading(true);
    setError(null);
    try {
      const result = await fetchPage(page);
      setItems((prev) => [...prev, ...result.items]);
      setHasMore(result.hasMore);
      setPage((prev) => prev + 1);
    } catch (err) {
      setError(err as Error);
    } finally {
      loadingRef.current = false;
      setLoading(false);
    }
  }, [fetchPage, page, hasMore]);

  useEffect(() => {
    if (entry?.isIntersecting) {
      void loadMore();
    }
  }, [entry?.isIntersecting, loadMore]);

  return { items, hasMore, loading, error, sentinelRef, loadMore } as const;
}

import { useCallback } from "react";
import { useInfiniteScroll, Page } from "./useInfiniteScroll";

interface Post {
  id: string;
  title: string;
}

const PAGE_SIZE = 20;

async function fetchPosts(page: number): Promise<Page<Post>> {
  const res = await fetch(`/api/posts?offset=${page * PAGE_SIZE}&limit=${PAGE_SIZE}`);
  if (!res.ok) throw new Error(`Failed to load posts: ${res.status}`);
  const data: Post[] = await res.json();
  return { items: data, hasMore: data.length === PAGE_SIZE };
}

export function FeedList() {
  const fetchPage = useCallback(fetchPosts, []);
  const { items, loading, hasMore, error, sentinelRef } = useInfiniteScroll(fetchPage);

  return (
    <div className="feed">
      <ul>
        {items.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>

      {error && <p className="feed__error">{error.message}</p>}
      {loading && <p className="feed__status">Loading…</p>}
      {!hasMore && !loading && <p className="feed__status">You’re all caught up.</p>}

      {hasMore && <div ref={sentinelRef} className="feed__sentinel" aria-hidden />}
    </div>
  );
}