React use() Hook — Promiseとコンテキストの条件付き読み取り

use() Hook（React 19）

useはReact 19の新しいHookで、従来のHookのルールを破ります：条件分岐やループ内で呼び出せます。Promise（Suspenseと連携）の読み取りと条件付きコンテキストの読み取りの2つの目的があります。

useContextとの主な違い

機能	useContext	use
条件付き呼び出し	不可	可能
ループ内	不可	可能
Promiseの読み取り	不可	可能
Reactバージョン	16.8+	19+

重要な警告：Promiseの作成

コンポーネント内でPromiseを作成してuse()に渡さないでください。毎レンダリングで新しいPromiseが作成され、Suspenseキャッシングが無効になります：

// バグ：毎レンダリングで新しいPromise
function Bad() {
  const data = use(fetch("/api/data").then(r => r.json()));
}

// 正しい：親で作成されたまたはキャッシュされたPromise
function Good({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise);
}

エラーハンドリング

Promiseがrejectされると、最も近いError Boundaryがレンダリングエラーと同様にエラーをキャッチします。SuspenseとError Boundaryを組み合わせて、完全なローディングとエラーハンドリングを実現します。