React の組み込み API

フックやコンポーネントの他に、react パッケージはコンポーネントの定義に役立つ他の API も提供しています。このページでは、残りのモダンな React API をすべてリストアップしています。


  • createContext を利用すると、子コンポーネントに対してコンテクストを定義および提供できます。useContext と一緒に使用されます。
  • lazy を利用すると、コンポーネントのコードの読み込みを初回レンダーまで遅延することができます。
  • memo を利用すると、同じ props を持つコンポーネントの再レンダーをスキップできます。useMemo や useCallback と一緒に使用されます。
  • startTransition を使うと、state の更新を低緊急度 (non-urgent) としてマークできます。useTransition に似ています。
  • act を使うと、テスト環境でレンダーやユーザ操作をラップして、アサーションを行う前に更新が確実に処理されるようにします。
  • cache を使うと、データフェッチや計算の結果をキャッシュできます。
  • cacheSignal を使うと、cache() の生存期間が終了したことを知ることができます。
  • captureOwnerStack は、開発環境で現在の Owner Stack を読み取り、利用可能な場合は文字列として返します。

リソース API

リソース (resource) とは、state として保持しなくともコンポーネントからアクセスできる情報のことです。例えばコンポーネントはプロミス (Promise) からメッセージを読み取ったりコンテクストからスタイル情報を読み取ったりできます。

以下の種類のリソースを use に渡すことができます。

  • Promise を渡した場合:その Promise の解決された値を読み取ることができます。
  • コンテクストを渡した場合:そのコンテクストの値を読み取ることができます。
  • Canary only browser の返り値を渡した場合:サーバレンダリング中に、このコンポーネントをブラウザ専用としてマークすることができます。
function MessageComponent({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
use(browser());
// ...
}