React を使った無限スクロールの実装方法

セットアップ

mkdir infinite-scroll-react
cd infinite-scroll-react
npx create-react-app --template typescript .

別のターミナルを立ち上げ、必要なライブラリをインストールします。また、typescript で実装するため、`@types/react-infinite-scroller`をインストールします。

npm i --save axios react-infinite-scroller
npm i --save-dev @types/react-infinite-scroller

App.tsx を以下のように修正します。このコードはユーザーがページの下に達するたびに新しいデータを自動的に読み込み、表示する処理を行います。

先ほどインストールした react-infinite-scroller ライブラリと axios を使用します。

https://jsonplaceholder.typicode.com/からダミーデータを取得し、データが読み込まれるたびに既存のリストに追加します。

import InfiniteScroll from "react-infinite-scroller";
import axios from "axios";
import { useState } from "react";

interface ItemState {
  userId: number;
  id: number;
  title: string;
  body: string;
}

function App() {
  const [items, setItems] = useState<ItemState[]>([]);
  const [page, setPage] = useState(1);

  const fetchData = async () => {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`
    );
    setItems([...items, ...response.data]);
    setPage(page + 1);
  };

  return (
    <InfiniteScroll
      style={{ margin: "10px" }}
      pageStart={0}
      loadMore={fetchData}
      hasMore={true}
      loader={
        <div className="loader" key={0}>
          Loading ...
        </div>
      }
    >
      {items.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </InfiniteScroll>
  );
}

export default App;