React18に向けて今更だけどSuspenseを使ってみる

React Conf 2021 が開催され、React18について様々な情報が発表されました。
（動画は日本語字幕もついてますのでぜひ御覧ください。字幕ありがたい！！！）

冒頭のKeynoteでは大部分の時間がSuspense周りの話に当てられており、今後Reactを使っていく上で理解しておくことは必須といっても過言でないと思います。すでにReact16.6の時点で実験的機能として利用可能でしたが、今回はReact18ベータ版でSuspenseを触ってみたいと思います。

Suspense自体の説明はこちらの動画をぜひ御覧ください。

React18 betaを使う準備

まずはReact17のプロジェクトをcreate-react-appを利用して作ります。

$ npx create-react-app react-18-suspense

reactとreact-domのバージョンを変更します

package.json

"react": "18.0.0-beta-24dd07bd2-20211208",
"react-dom": "18.0.0-beta-24dd07bd2-20211208",

$ npm install

最後に、src/index.jsの内容を修正します。

src/index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

立ち上げてうまく動いているか確認してみます。

$ npm start

Reactのロゴが回っております。うまくいきました。

Suspenseを使ってみる

GitHubのAPIを使って超単純なリストを作ります。
フェッチようにSWRをinstallします。
React18のbeta版を利用しているため、--forceオブションをつけます。

$ npm install swr --force

次にGitHubのAPIを叩いてユーザーリストを取得＆表示するコンポーネントを作ります。

src/components/UserList.js

import useSWR from "swr";

const fetcher = async (url) => {
    // すぐフェッチできちゃうので3s待つ
    await new Promise((resolve) => setTimeout(resolve, 3000));
    return fetch(url).then((r) => r.json())
}

export const UserList = () => {
    const { data } = useSWR('https://api.github.com/users', fetcher, { suspense: true });

    return (
        <ul>{data.map(user => <li key={user.id}>{user.login}</li>)}</ul>
    ); 
}

UserListは単純にデータの取得と表示をするだけのコンポーネントです。
コンポーネントの中では値が取得できることが保証されており非常にスッキリしました。
便宜上、urlやfetcherを含めてしまっていますが、分離させればよりコンポーネントの責務が単純になります。

App.jsでこのように呼び出します

src/App.js

import './App.css';
import { Suspense } from 'react';
import { UserList } from './components/UserList';

function App() {

  return (
    <div className="App">
      <Suspense fallback={<p>Now Loading...</p>}>
        <UserList/>
      </Suspense>
    </div>
  );
}

export default App;

Suspenseで囲われたコンポーネント内でデータ取得前の場合は、fallbackに指定した内容が表示されます。
ErrorBoundaryを使ったエラー処理も可能です。

最後にうまく動作するか確認してみます。

最初はローディングがでて・・・

ユーザー一覧が表示されました！

終わりに

というわけでReact18でSuspenseを使ってみました。
（この内容なら別にReact17でもできるのでは)