【React】【Suspense】利用方法

はじめに

この記事は【React】【Suspense】の利用方法の備忘録である。

【Suspense】とは

React アプリケーションで非同期な処理が完了するまで待機し、その間に指定されたフォールバック（代替）コンポーネントを表示することができる。
要約すると、コンポーネントを「ローディング中なのでまだレンダリングできない」という状態にすることができる。
ReactはコンポーネントをレンダリングしてDOM（など）に反映することが役割のライブラリなので、ローディングできないコンポーネントがあるということはレンダリング結果が無くてDOMへの反映もできないということになってしまう。

1. 利用方法

以下にサンプルコードを記述する。

let status = "pending"
let result

function fetchPosts(userId) {
  let url = `https://jsonplaceholder.typicode.com/posts${userId ? "?userId=" + userId : ""}`
  let fetching = fetch(url)
    .then((res) => res.json())
    .then((success) => {
      status = "fulfilled"
      result = success
    })
    .catch((error) => {
      status = "rejected";
      result = error;
    });

  return () => {
    if (status === "pending") {
      throw fetching // Promise を throw
    } else if (status === "rejected") {
      throw result
    } else if (status === "fulfilled") {
      return result // Promise が解決したら、取得したデータを返す
    }
  }
}

const Posts = () => {
  const userId = JSON.parse(localStorage.getItem("authenticatedUser"))?.id
  const posts = fetchPosts(userId)

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
      {posts.map((post, idx) => (
        <Post post={post} key={idx} />
      ))}
    </div>
  )
}

const MyPosts = () => {
  return (
    <Suspense fallback={<Spinner />}>
      <Posts />
    </Suspense>
  )
}