Infinite-Scroll List in React with IntersectionObserver and Cursor Pagination

import { useCallback, useEffect, useRef, useState } from "react";
import { fetchPage, Post } from "./api";

export function useInfiniteList() {
  const [items, setItems] = useState<Post[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState(false);

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

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

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

    const controller = new AbortController();
    controllerRef.current = controller;

    try {
      const page = await fetchPage(cursorRef.current, controller.signal);
      setItems((prev) => [...prev, ...page.items]);
      cursorRef.current = page.nextCursor;
      if (page.nextCursor === null) setDone(true);
    } catch (err) {
      if ((err as Error).name === "AbortError") return;
      setError((err as Error).message);
    } finally {
      loadingRef.current = false;
      setLoading(false);
    }
  }, [done]);

  useEffect(() => {
    return () => controllerRef.current?.abort();
  }, []);

  return { items, loading, error, done, loadMore };
}

import { useEffect, useRef } from "react";
import { useInfiniteList } from "./useInfiniteList";

export function InfiniteList() {
  const { items, loading, error, done, loadMore } = useInfiniteList();
  const sentinelRef = useRef<HTMLDivElement | null>(null);

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

  useEffect(() => {
    const node = sentinelRef.current;
    if (!node || done) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loading) {
          loadMore();
        }
      },
      { rootMargin: "200px" }
    );

    observer.observe(node);
    return () => observer.disconnect();
  }, [loadMore, loading, done]);

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

      {error && <p className="feed__error">{error}</p>}
      {loading && <p className="feed__status">Loading…</p>}
      {done && <p className="feed__status">No more posts</p>}

      <div ref={sentinelRef} aria-hidden="true" />
    </div>
  );
}