Reactガイドを読んでいくその303

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

サスペンスを使ったデータ取得（実験的機能）

そもそもサスペンスとは何なのか？

昨日も触れたようにサスペンスはレンダー可能になる前にコンポーネントが何かを待機できるようにすることができる。

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Try to read user info, although it might not have loaded yet
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read posts, although they might not have loaded yet
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

サスペンスは何でないのか

  • データ取得実装ではない。

  • すぐに使えるクライアントではない

  • データ取得をビューレイヤと密結合させない

サスペンスは何ができるのか

  • データ取得ライブラリがReactと深く連携できる

  • ロード中状態の表示を細かく設計することができる

  • 競合状態を避ける手助けができる

今日はここまで。