ReactでIntersectionObserverを使い、無限スクロールを作る方法

export type Cat = { id: number; name: string };
export type CatPage = { items: Cat[]; hasMore: boolean };

const TOTAL_PAGES = 5;

// 検証用の「サーバー」。300ms 待ってから、page ページ目の pageSize 件を返す
export async function fetchCats(page: number, pageSize: number): Promise<CatPage> {
  window.requests.push(page);
  await new Promise((resolve) => setTimeout(resolve, 300));
  const items = Array.from({ length: pageSize }, (_, i) => {
    const id = (page - 1) * pageSize + i + 1;
    return { id, name: `猫 ${id}` };
  });
  return { items, hasMore: page < TOTAL_PAGES };
}

declare global {
  interface Window { requests: number[] }
}
window.requests = [];

import { useEffect, useRef, useState } from 'react';
import { fetchCats, type Cat } from './api';

type Props = { pageSize?: number; rootMargin?: string };

export function InfiniteList({ pageSize = 20, rootMargin = '0px 0px 200px 0px' }: Props) {
  const [items, setItems] = useState<Cat[]>([]);
  const [nextPage, setNextPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const sentinelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 読み込み中と、最後まで読んだあとは見張らない
    if (loading || !hasMore) return;
    const sentinel = sentinelRef.current;
    if (!sentinel) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (!entries[0].isIntersecting) return;
        observer.disconnect(); // 1回の交差で読むのは1ページだけ
        setLoading(true);
        fetchCats(nextPage, pageSize).then((res) => {
          setItems((prev) => [...prev, ...res.items]);
          setNextPage(nextPage + 1);
          setHasMore(res.hasMore);
          setLoading(false);
        });
      },
      { rootMargin },
    );
    observer.observe(sentinel);
    return () => observer.disconnect();
  }, [nextPage, loading, hasMore, pageSize, rootMargin]);

  return (
    <div>
      <ul>
        {items.map((cat) => (
          <li key={cat.id} className="row">{cat.name}</li>
        ))}
      </ul>
      {/* 一覧の最後に置く目印。これが見えたら次のページを読む */}
      <div ref={sentinelRef} className="sentinel" />
      {loading && <p className="status">読み込み中…</p>}
      {!hasMore && <p className="status">これ以上ありません</p>}
    </div>
  );
}

  開いて1秒後: リクエストしたページ=[1,2] 行の数=40（重複なし 40） 最初=猫 1 最後=猫 40 下の表示=(なし) ページの高さ=1601 画面の高さ=600
  一番下までスクロール 1回目: リクエストしたページ=[1,2,3,4] 行の数=80（重複なし 80） 最初=猫 1 最後=猫 80 下の表示=(なし) ページの高さ=3201 画面の高さ=600
  一番下までスクロール 2回目: リクエストしたページ=[1,2,3,4,5] 行の数=100（重複なし 100） 最初=猫 1 最後=猫 100 下の表示=これ以上ありません ページの高さ=4041 画面の高さ=600
  一番下までスクロール 3回目: リクエストしたページ=[1,2,3,4,5] 行の数=100（重複なし 100） 最初=猫 1 最後=猫 100 下の表示=これ以上ありません ページの高さ=4041 画面の高さ=600

  rootMargin='0px 0px 200px 0px': リクエストしたページ=[1,2,3,4,5] そのときの距離=[-600,200,200,200,200]
  rootMargin='0px': リクエストしたページ=[1,2,3,4] そのときの距離=[-600,0,-1,-1]

// 見張りを最初に1回だけ作る書き方。コールバックの中の nextPage は、最初の描画の値のまま
export function StaleList({ pageSize = 20 }: { pageSize?: number }) {
  const [items, setItems] = useState<Cat[]>([]);
  const [nextPage, setNextPage] = useState(1);
  const loadingRef = useRef(false);
  const sentinelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting || loadingRef.current) return;
      loadingRef.current = true;
      fetchCats(nextPage, pageSize).then((res) => {
        setItems((prev) => [...prev, ...res.items]);
        setNextPage(nextPage + 1);
        loadingRef.current = false;
      });
    });
    observer.observe(sentinelRef.current!);
    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <ul>
        {items.map((cat, i) => (
          <li key={i} className="row">{cat.name}</li>
        ))}
      </ul>
      <div ref={sentinelRef} className="sentinel" />
    </div>
  );
}

  開いて1秒後: リクエストしたページ=[1] 行の数=20（重複なし 20） 最初=猫 1 最後=猫 20 下の表示=(なし) ページの高さ=801 画面の高さ=600
  一番下までスクロール 1回目: リクエストしたページ=[1,1,1] 行の数=60（重複なし 20） 最初=猫 1 最後=猫 20 下の表示=(なし) ページの高さ=2401 画面の高さ=600
  一番下までスクロール 2回目: リクエストしたページ=[1,1,1,1,1] 行の数=100（重複なし 20） 最初=猫 1 最後=猫 20 下の表示=(なし) ページの高さ=4001 画面の高さ=600
  一番下までスクロール 3回目: リクエストしたページ=[1,1,1,1,1,1,1] 行の数=140（重複なし 20） 最初=猫 1 最後=猫 20 下の表示=(なし) ページの高さ=5601 画面の高さ=600

// 見張りを1回だけ作り、ページ番号と読み込み中かどうかを ref で持つ書き方
export function StuckList({ pageSize = 20 }: { pageSize?: number }) {
  const [items, setItems] = useState<Cat[]>([]);
  const nextPageRef = useRef(1);
  const loadingRef = useRef(false);
  const sentinelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (!entries[0].isIntersecting || loadingRef.current) return;
      loadingRef.current = true;
      fetchCats(nextPageRef.current, pageSize).then((res) => {
        setItems((prev) => [...prev, ...res.items]);
        nextPageRef.current += 1;
        loadingRef.current = false;
      });
    });
    observer.observe(sentinelRef.current!);
    return () => observer.disconnect();
  }, [pageSize]);
  // …（return 以下は省略。StaleList と同じで、key だけを cat.id にしています）

  開いて1秒後: リクエストしたページ=[1] 行の数=20（重複なし 20） 最初=猫 1 最後=猫 20 下の表示=(なし) ページの高さ=801 画面の高さ=600
  一番下までスクロール 1回目: リクエストしたページ=[1,2,3] 行の数=60（重複なし 60） 最初=猫 1 最後=猫 60 下の表示=(なし) ページの高さ=2401 画面の高さ=600
  一番下までスクロール 2回目: リクエストしたページ=[1,2,3,4,5] 行の数=100（重複なし 100） 最初=猫 1 最後=猫 100 下の表示=(なし) ページの高さ=4001 画面の高さ=600
  一番下までスクロール 3回目: リクエストしたページ=[1,2,3,4,5,6,7] 行の数=140（重複なし 140） 最初=猫 1 最後=猫 140 下の表示=(なし) ページの高さ=5601 画面の高さ=600

  stuck: リクエストしたページ=[1] 行の数=5（重複なし 5） 最初=猫 1 最後=猫 5 下の表示=(なし) ページの高さ=600 画面の高さ=600
  infinite: リクエストしたページ=[1,2,3,4,5] 行の数=25（重複なし 25） 最初=猫 1 最後=猫 25 下の表示=これ以上ありません ページの高さ=1041 画面の高さ=600

  開いて1秒後: リクエストしたページ=[1,2] 行の数=40（重複なし 40） 最初=猫 1 最後=猫 40 下の表示=(なし) ページの高さ=1601 画面の高さ=600
  一番下までスクロール 1回目: リクエストしたページ=[1,2,3,4] 行の数=80（重複なし 80） 最初=猫 1 最後=猫 80 下の表示=(なし) ページの高さ=3201 画面の高さ=600
  一番下までスクロール 2回目: リクエストしたページ=[1,2,3,4,5] 行の数=100（重複なし 100） 最初=猫 1 最後=猫 100 下の表示=これ以上ありません ページの高さ=4041 画面の高さ=600