React 19 の use で Suspense に対応したコンポーネントを作る

React 19 では use が導入され、これを利用すると <Suspense> に対応したコンポーネントの作成が容易になります。

• React 19 RC – React
• use – React

Promise を use を経由して利用すると、それが完了していない場合に例外が投げられるので、これがそのまま Suspense の実装として使えます。公式にも書かれていますが、これを try-catch すると例外として拾ってしまうので動作しなくなります。

import {use} from 'react';

function ChildComponet() {
  const data = use(aPromise)
  return <div>{data}
}

function App() {
  return (
    <Suspense fallback={<p>loading</p>}>
      <ChildComponent />
    </Suspense>
  )
}

通常の Hooks と異なり、 if を絡めて早期 Return などを書くことも可能です。