React

【React】Suspenseでデータ取得中に、Loading…を表示する

作成日：2022年06月29日

更新日：2022年06月29日

Suspenseを使うと、データ取得中にスピナーや Loading…などを表示することができます。

JSON Placeholder（https://jsonplaceholder.typicode.com/）からデータを取得中に、Loading…と表示します。

まずは、データの取得、表示する PostData.jsx を作成します。

jsx
import React, { useState, useEffect } from "react";

const PostData = () => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (
    <div>
      {data?.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
};

export default PostData;

React のlazyを使って、PostData.jsx を遅延読み込みします。

jsx
function App() {
  const PostData = React.lazy(() => import("./PostData"));

SuspenseでPostDataを囲みます。

また、fallbackで<div>Loading...</div>を指定します。

jsx
function App() {
  const PostData = React.lazy(() => import("./PostData"));

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PostData />
    </Suspense>
  );
}