React × TypeScriptで学ぶ無限スクロールの作法 — IntersectionObserverからTanStack Queryまで

import { useEffect, useRef, useState } from 'react';

type Post = { id: number; title: string };

async function fetchPosts(page: number): Promise<{ items: Post[]; hasMore: boolean }> {
  const res = await fetch(`/api/posts?page=${page}`);
  return res.json();
}

export function PostList() {
  const [pages, setPages] = useState<Post[][]>([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const sentinelRef = useRef<HTMLDivElement | null>(null);

  // 交差時に次ページを読み込む
  useEffect(() => {
    const el = sentinelRef.current;
    if (!el || !hasMore) return;

    const io = new IntersectionObserver(
      async ([entry]) => {
        if (!entry.isIntersecting || isLoading) return;
        setIsLoading(true);
        const { items, hasMore: next } = await fetchPosts(page);
        setPages((prev) => [...prev, items]);
        setHasMore(next);
        setPage((p) => p + 1);
        setIsLoading(false);
      },
      { rootMargin: '200px' } // ファーストビュー手前で先読み
    );

    io.observe(el);
    return () => io.disconnect();
  }, [page, hasMore, isLoading]);

  return (
    <ul>
      {pages.flat().map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
      {hasMore && <div ref={sentinelRef} aria-hidden="true" />}
      {isLoading && <p role="status">Loading...</p>}
      {!hasMore && <p>これ以上ありません</p>}
    </ul>
  );
}

import { useCallback, useEffect, useRef } from 'react';

type Options = {
  hasMore: boolean;
  isLoading: boolean;
  onLoadMore: () => void;
  rootMargin?: string;
};

export function useInfiniteScroll<T extends HTMLElement>({
  hasMore,
  isLoading,
  onLoadMore,
  rootMargin = '200px',
}: Options) {
  const observerRef = useRef<IntersectionObserver | null>(null);

  // 「callback ref」パターン: センチネル要素が変わるたびに observer を張り直す
  const sentinelRef = useCallback(
    (node: T | null) => {
      if (observerRef.current) observerRef.current.disconnect();
      if (!node || !hasMore) return;

      observerRef.current = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && !isLoading) onLoadMore();
        },
        { rootMargin }
      );
      observerRef.current.observe(node);
    },
    [hasMore, isLoading, onLoadMore, rootMargin]
  );

  // アンマウント時のクリーンアップ
  useEffect(() => () => observerRef.current?.disconnect(), []);

  return sentinelRef;
}

function PostList() {
  const { items, isLoading, hasMore, loadMore } = usePosts(); // 別途実装
  const sentinelRef = useInfiniteScroll<HTMLDivElement>({
    hasMore,
    isLoading,
    onLoadMore: loadMore,
  });

  return (
    <ul>
      {items.map((p) => <li key={p.id}>{p.title}</li>)}
      {hasMore && <div ref={sentinelRef} aria-hidden="true" />}
    </ul>
  );
}

import { useInfiniteQuery } from '@tanstack/react-query';

type Page = { items: Post[]; nextCursor: string | null };

export function usePosts() {
  return useInfiniteQuery<Page, Error>({
    queryKey: ['posts'],
    queryFn: async ({ pageParam }) => {
      const res = await fetch(`/api/posts?cursor=${pageParam ?? ''}`);
      if (!res.ok) throw new Error('fetch failed');
      return res.json();
    },
    initialPageParam: null as string | null,
    getNextPageParam: (last) => last.nextCursor, // null なら hasNextPage=false
  });
}

function PostList() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = usePosts();

  const sentinelRef = useInfiniteScroll<HTMLDivElement>({
    hasMore: hasNextPage,
    isLoading: isFetchingNextPage,
    onLoadMore: fetchNextPage,
  });

  if (status === 'pending') return <p>Loading...</p>;
  if (status === 'error') return <p>読み込みに失敗しました</p>;

  return (
    <ul>
      {data.pages.flatMap((p) => p.items).map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
      {hasNextPage && <div ref={sentinelRef} aria-hidden="true" />}
      {isFetchingNextPage && <p role="status">さらに読み込み中...</p>}
    </ul>
  );
}