Reactでの無限スクロールの実装方法

Reactでの無限スクロールの実装方法

Reactを使ったWebアプリケーションでは、スクロールを使ったページングが一般的です。しかし、ユーザー体験を向上させるために、無限スクロールを実装することが求められることもあります。この記事では、Reactでの無限スクロールの実装方法について説明します。

Intersection Observer APIを使用する

Reactで無限スクロールを実装するには、Intersection Observer APIを使用するのが一般的です。これは、要素が画面内に表示されたかどうかを検知するAPIで、スクロールイベントを監視することなく、要素が画面内に表示されたときにコールバック関数を呼び出すことができます。

まず、Intersection Observer APIを使うために、useEffectフックを使って、監視する要素を登録します。

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

function InfiniteScroll() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const page = useRef(1);
  const observer = useRef();

  useEffect(() => {
    observer.current = new IntersectionObserver((entries) => {
      const firstEntry = entries[0];
      if (firstEntry.isIntersecting) {
        page.current += 1;
        fetchData();
      }
    });
    observer.current.observe(document.querySelector("#observer"));
  }, []);

  const fetchData = async () => {
    setLoading(true);
    const response = await fetch(`https://example.com/api/data?page=${page.current}`);
    const newData = await response.json();
    setData([...data, ...newData]);
    setLoading(false);
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
      <div id="observer"></div>
      {loading && <div>Loading...</div>}
    </div>
  );
}

export default InfiniteScroll;

上記のコードでは、useEffectフックを使って、Intersection Observer APIを初期化しています。これにより、observer.currentに新しいIntersectionObserverオブジェクトが設定されます。そして、observer.current.observe()を使って、監視対象の要素（この例では、id="observer"を持つ要素）を登録します。

ページネーションのロジックを実装する

ページネーションのロジックは、APIと連携してデータを取得する必要があります。この例では、fetchData関数がデータを取得して、dataステートに追加します。また、loadingス
テートを使って、ローディング中に表示するUIを制御しています。

const fetchData = async () => {
  setLoading(true);
  const response = await fetch(`https://example.com/api/data?page=${page.current}`);
  const newData = await response.json();
  setData([...data, ...newData]);
  setLoading(false);
};

上記のコードでは、fetchData関数がpage.currentを使用して、APIからデータを取得しています。取得したデータは、setDataを使って、dataステートに追加されます。そして、loadingステートがtrueに設定されて、ローディング中に表示するUIを制御しています。

無限スクロールの制限を設定する

無限スクロールを使用する場合、無制限にスクロールすると、ユーザーのブラウザのパフォーマンスが低下する可能性があります。そのため、スクロールが最後のページに到達した場合、無限スクロールを停止するように制限を設定することが推奨されます。

const fetchData = async () => {
  setLoading(true);
  const response = await fetch(`https://example.com/api/data?page=${page.current}`);
  const newData = await response.json();
  if (newData.length > 0) {
    setData([...data, ...newData]);
    setLoading(false);
  } else {
    observer.current.disconnect();
  }
};

上記のコードでは、fetchData関数が返すデータが空の場合、observer.current.disconnect()を使用して、Intersection Observer APIの監視を停止します。これにより、無限スクロールが制限されます。

まとめ

Reactでの無限スクロールの実装には、Intersection Observer APIを使用するのが一般的です。このAPIを使うことで、スクロールイベントを監視することなく、要素が画面内に表示されたときにコールバック関数を呼び出すことができます。また、無限スクロールを使用する場合は、制限を設定することが重要です。最後のページに到達した場合、監視を停止することで、パフォーマンスの低下を防ぐことができます。