React19で新たに追加された「use」APIの概要とその使い方について

はじめに

React19では、新しいAPIであるuseが導入されました
このAPIは、プロミスやコンテキストなどのリソースから値を読み取るためのものです
この記事useの基本的な概要、具体的な使用例。以前のバージョンとの違いについて説明していきたいと思います

基本的な概要

useAPIは、非同期または同期リソースからのデータ取得を簡素化するためのものです
従来の方法では、プロミスからデータを取得するために多くのコードが必要ですが、useを使用することでこれが大幅に簡略化されます
具体的な機能は下記の通りです

• プロミス（Promise）から値を読み取ります
• コンテキスト（Context）から値を取得します
• 他の非同期リソースからデータを取得します
• useに渡されたプロミスが未解決の場合、コンポーネントはサスペンドされます
• プロミスが解決されると、コンポーネントは再レンダリングされます

使用例

import { use } from 'react';

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Fetched data");
    }, 1000);
  });
}

function MyComponent() {
  const data = use(fetchData());

  return <div>{data}</div>;
}

上記ではfetchData関数がプロミスを返し、useを使ってその結果を取得しています
従来の方法では、コンポーネント内で状態を管理し、useEffectフックを使用してデータを取得する必要がありましたが、useAPIによりこれが簡潔に書けます

以前のReactバージョンとの違い

以前のバージョンのReactでは、非同期データの取得には以下のようにuseEffectフックを状態管理を使用する必要がありました

import React, { useState, useEffecct } from 'react';

function fetchData() {
  return new Promise((resolve) => {
    settimeout(() => {
      resolve("Fetched data");
    }, 1000);

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (data === null) {
    return <div>Loading...</div>
  }

  return <div>{data}</div>
}

このアプローチでは、初回レンダリング時に一時的な「Loading...」メッセージが表示され、その後データが取得されると再レンダリングが行われます
React19のuseを使用すると、初回レンダリングを一時停止できるため、よりシンプルなコードで非同期データを扱うことが可能です。これにより分岐も少なくなりますね
こう見るとuseを使用する場合と比べて状態管理を使用することで複雑に見えると思います

まとめ

useAPIの導入でプロミスやコンテキスト周りの処理が楽に書けるようになりました
非同期処理だけでなく同期処理の状態管理をできるようになり、失敗したらサスペンドされるようになります
useAPIを使用することで運用、メンテナンス性も向上すると思うので今後の開発に活かせれば大きな効果が期待できると感じました

参考リンク