React 19の新機能 `use` フック実践ガイド【2025年版】

はじめに：React 19とuseフックの登場

React 18でConcurrent FeaturesとSuspenseが導入されてから、Reactのエコシステムは非同期処理をより宣言的に扱う方向へと進化してきました。そしてReact 19では、その流れを決定づける新しい組み込みフック、useが登場します。

useフックは、一見するとただの新しいフックですが、その機能はReactコンポーネントの書き方を根本から変える可能性を秘めています。これまでuseEffectとuseStateを組み合わせて行っていた非同期データの取得や、useContextで行っていた状態の読み取りを、よりシンプルかつ直感的に記述できるようになります。

useフックが解決する主な課題:

• 非同期処理の複雑さ: useEffect内でのデータフェッチは、ローディング状態、エラー状態、クリーンアップ処理など、多くのボイラープレートコードを必要としました。
• useContextの制限: useContextはトップレベルでしか呼び出せず、条件分岐の中で使うことができませんでした。

本記事では、useフックの基本的な使い方から、PromiseとContextを扱う具体的な実践例までを、従来の書き方と比較しながら詳しく解説します。

注: React 19は本記事執筆時点（2025年9月）でCanary版として利用可能です。APIは変更される可能性があります。

useフックの基本的な使い方

useフックは、PromiseまたはContextという2種類の「リソース」を受け取り、その値を「展開（unwrap）」して返す機能を持っています。

import { use } from 'react';

function MyComponent() {
  const value = use(resource); // resourceはPromiseかContext
  // ...
}

最大の特徴は、if文やforループの中、早期returnの後など、コンポーネント内のどこでも呼び出せる点です。これは、他のフック（useState, useEffectなど）がトップレベルでしか呼び出せないという「フックのルール」の例外となります。

実践1：useでPromise（非同期処理）を扱う

useフックの最も革新的な使い方が、Promiseを直接扱う機能です。これにより、コンポーネント内でのデータフェッチが劇的にシンプルになります。

従来のuseEffect + useStateとの比較

まず、従来のデータフェッチのコードを見てみましょう。

// 従来のデータフェッチ
import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return <h1>{user.name}</h1>;
}

ローディングとエラーの状態をすべて手動で管理する必要があり、コードが冗長になりがちでした。

次に、useフックを使った場合のコードです。

// `use`を使ったデータフェッチ
import { use, Suspense } from 'react';

// データフェッチ関数 (キャッシュ推奨)
const fetchUser = (userId) => {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

function UserProfile({ userId }) {
  // `use`にPromiseを渡すだけ！
  const user = use(fetchUser(userId));

  return <h1>{user.name}</h1>;
}

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <UserProfile userId={1} />
    </Suspense>
  );
}

コードが驚くほどシンプルになりました。useフックにPromiseを渡すと、ReactはそのPromiseが解決されるまでコンポーネントのレンダリングを**中断（suspend）**します。そして、最も近い<Suspense>コンポーネントのfallbackが表示されます。Promiseが解決されると、その値をuserに返し、コンポーネントのレンダリングが再開されます。

エラーハンドリングも、<Suspense>と同様にError Boundaryコンポーネントで囲むことで、宣言的に行うことができます。

実践2：useでContextを読み取る

useフックは、useContextの代替としても機能し、さらに柔軟な使い方が可能です。

従来のuseContextとの比較

useContextは、コンポーネントのトップレベルでしか呼び出せませんでした。

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...
}

useフックでも同様のことができます。

import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function MyComponent() {
  const theme = use(ThemeContext);
  // ...
}

ここまではuseContextと同じですが、useの真価はここからです。

条件付きでContextを読み取る

useフックは条件分岐の中で呼び出すことができます。これにより、特定の条件下でのみContextの値を読み取るといった、これまでできなかったことが可能になります。

import { use } from 'react';
import { ThemeContext } from './ThemeContext';
import { OverrideThemeContext } from './OverrideThemeContext';

function Button({ useOverride }) {
  let theme;
  if (useOverride) {
    // 条件分岐の中で`use`を呼び出す
    const overrideTheme = use(OverrideThemeContext);
    if (overrideTheme) {
      theme = overrideTheme;
    } else {
      theme = use(ThemeContext);
    }
  } else {
    theme = use(ThemeContext);
  }

  return <button style={{ background: theme.background, color: theme.color }}>Click me</button>;
}

このように、コンポーネントのPropsや他の状態に応じて、動的に異なるContextから値を読み取ることができます。これはuseContextでは不可能でした。

useフックのルールと注意点

useフックは非常に強力ですが、いくつかのルールがあります。

1. 呼び出し可能な場所: useはReactコンポーネントまたは他のカスタムフックの中でのみ呼び出せます。クラスコンポーネントやイベントハンドラのような通常のJavaScript関数内では呼び出せません。
2. Promiseのキャッシュ: useにPromiseを渡す場合、再レンダリングのたびに新しいPromiseが作成されると、無限ループに陥る可能性があります。Promiseを返す関数は、React.cacheやuseMemo、あるいはReact Server Components環境など、キャッシュされる仕組みの中で呼び出す必要があります。

まとめ：useがもたらす未来のReactコンポーネント

useフックは、Reactにおける非同期処理と状態管理のパラダイムを大きく変える可能性を秘めています。

• 非同期処理の簡素化: useEffectとuseStateによる手動の状態管理から解放され、Suspenseと組み合わせることで、より宣言的で直感的なコードを書けるようになります。
• Context利用の柔軟性向上: 条件分岐内でのuseの利用により、これまで以上にダイナミックで再利用性の高いコンポーネント設計が可能になります。

useフックは、React Server Components (RSC) と組み合わせることでその真価を最大限に発揮しますが、クライアントサイドコンポーネントにおいても、コードの可読性と保守性を大幅に向上させる強力なツールです。

React 19へのアップデートの際には、ぜひこの新しいuseフックを活用し、よりモダンで洗練されたReactアプリケーションの開発を体験してみてください。