React useフックの使い方：レンダリング中にPromiseとコンテキストを読む

use は、コンポーネントのレンダリング中にPromiseやコンテキストから値を読むReact 19のAPIです。use(promise) はPromiseが解決するまでコンポーネントを一時停止し、その間は最も近い <Suspense> のフォールバックを表示します。use(context) は useContext のように動きますが、if やループの中に置けます。

下の fetchUser 関数は本物のリクエストの代わりです。

import { Suspense, use, useState } from 'react';

function fetchUser(id) {
    console.log('fetching user', id);
    return new Promise((resolve) =>
        setTimeout(() => resolve({ id, name: id === 1 ? 'Ada' : 'Linus' }), 1000),
    );
}

function Profile({ userPromise }) {
    const user = use(userPromise);
    return <p>User #{user.id}: {user.name}</p>;
}

export default function App() {
    const [userPromise, setUserPromise] = useState(() => fetchUser(1));

    return (
        <div>
            <button onClick={() => setUserPromise(fetchUser(1))}>User 1</button>
            <button onClick={() => setUserPromise(fetchUser(2))}>User 2</button>
            <Suspense fallback={<p>Loading...</p>}>
                <Profile userPromise={userPromise} />
            </Suspense>
        </div>
    );
}

最初のレンダリングでは1秒間「Loading...」が表示され、その後プロフィールが表示されます。User 2をクリックすると、新しいPromiseが保留中の間、フォールバックが戻ってきます。Profile は独自の読み込み中のstateを持たず、データがすでにあるかのように書かれています。

use(promise)の仕組み

Profile が use(userPromise) を呼ぶと：

• Promiseが解決済みなら、use はその値を返し、レンダリングが続きます。
• まだ保留中なら、Reactは Profile のレンダリングを止め、その上にある最も近い <Suspense> のフォールバックを表示します。Promiseが確定すると、Reactはもう一度 Profile をレンダリングし、今度は use が値を返します。
• rejectされたなら、Reactは代わりに最も近いエラーバウンダリを表示します。

Reactは結果をPromiseオブジェクトそのものに覚えておきます。だからこそ、次のレンダリングでもPromiseは同じオブジェクトでなければならないのです。

次のプロフィールを読み込む間、前のプロフィールを画面に残したいなら、Promiseをトランジションの中でセットします。するとReactは、フォールバックをもう一度表示する代わりに待ってくれます。

<button onClick={() => startTransition(() => setUserPromise(fetchUser(2)))}>User 2</button>

Promiseを作る場所

ここがつまずきやすい部分です。読む側のコンポーネントの中でfetchを呼ぶのは自然に見えますが、動きません。

// Do not do this
function Profile({ id }) {
    const user = use(fetchUser(id)); // a new promise on every render
    return <p>{user.name}</p>;
}

レンダリングのたびに fetchUser が呼ばれ、新しい保留中のPromiseが得られます。Profile はサスペンドします。そのPromiseが解決すると、Reactはもう一度 Profile をレンダリングし、それがまた保留中のPromiseを作り、またサスペンドします。コンポーネントは決してデータを表示せず、ネットワークタブはリクエストで埋まります。

Promiseは、読む側のレンダリングのたびに再実行されない場所で作ってください。

• 親で、stateに保つ（最初の例のように）か、イベントハンドラで作ります。
• モジュールのトップレベルで、データがpropsに依存しないとき：コンポーネントの上に const configPromise = fetchConfig();。
• 引数をキーにしたキャッシュで、同じidなら同じPromiseを返すようにします。
• フレームワークで：Server ComponentはPromiseをpropとしてクライアントコンポーネントに渡せ、ルートのローダーも同じことをします。use が想定しているのはこのケースです。

次はキャッシュ版です。コンポーネントがidでデータを求めつつ、安定したPromiseを受け取れます。

import { Suspense, use, useState } from 'react';

const cache = new Map();
function getWeather(city) {
    if (!cache.has(city)) {
        console.log('request for', city);
        // Stands in for a real request
        cache.set(city, new Promise((resolve) => setTimeout(() => resolve(`${city.length * 3} °C`), 800)));
    }
    return cache.get(city);
}

function Weather({ city }) {
    const temperature = use(getWeather(city));
    return <p>{city}: {temperature}</p>;
}

export default function App() {
    const [city, setCity] = useState('Lisbon');

    return (
        <div>
            {['Lisbon', 'Oslo', 'Cairo'].map((c) => (
                <button key={c} onClick={() => setCity(c)}>{c}</button>
            ))}
            <Suspense fallback={<p>Loading weather...</p>}>
                <Weather city={city} />
            </Suspense>
        </div>
    );
}

3つの都市を順にクリックし、すでに開いた都市に戻ってください。コンソールには都市ごとに1回だけリクエストが記録され、一度見た都市は、Promiseがすでに解決しているのでフォールバックなしに表示されます。if (!cache.has(city)) の確認を削除すると、コンポーネントはまた永遠にサスペンドするようになります。

本物のキャッシュには、エントリを期限切れにする方法も必要です。データライブラリやフレームワークがそれを扱ってくれるので、ほとんどのアプリはそこからPromiseを受け取ります。

use(context)はifの中でも使える

use(SomeContext) は useContext(SomeContext) と同じ値を返します。違いは呼べる場所です。ほかのすべてのフックはトップレベルで、すべてのレンダリングで同じ順番で実行しなければなりません（フックのルール）。use は、早期returnの後、条件分岐の中、ループの中でも呼べます。

import { createContext, use, useState } from 'react';

const UserContext = createContext(null);

function Greeting({ showName }) {
    if (!showName) {
        return <p>Hello!</p>;
    }
    const user = use(UserContext);
    return <p>Hello, {user.name}!</p>;
}

export default function App() {
    const [showName, setShowName] = useState(false);

    return (
        <UserContext value={{ name: 'Grace' }}>
            <button onClick={() => setShowName(!showName)}>
                {showName ? 'Hide' : 'Show'} the name
            </button>
            <Greeting showName={showName} />
        </UserContext>
    );
}

ボタンをクリックして2つの分岐を切り替えてください。use(UserContext) を useContext(UserContext) に置き換えると、フックがあるレンダリングでは実行され、別のレンダリングでは実行されないことになるので、コードはフックのルールに反します。

それでも use には制限があります。呼べるのはコンポーネントのレンダリング中か、カスタムフックの中だけです。イベントハンドラやエフェクトでは、レンダリング中にすでに得た値でコンテキストを読んでください。

エラー：try/catchではなくエラーバウンダリ

Promiseがrejectされると、エラーはレンダリングのエラーと同じように、最も近いエラーバウンダリに送られます。

// This throws on purpose: the second request rejects and the boundary shows it.
import { Component, Suspense, use, useState } from 'react';

function fetchPost(id) {
    // Stands in for a real request. Post 2 does not exist.
    return new Promise((resolve, reject) =>
        setTimeout(() => (id === 2 ? reject(new Error('Post 2 not found')) : resolve(`Post ${id} body`)), 600),
    );
}

class ErrorBoundary extends Component {
    state = { error: null };
    static getDerivedStateFromError(error) {
        return { error };
    }
    render() {
        if (this.state.error) return <p style={{ color: 'crimson' }}>{this.state.error.message}</p>;
        return this.props.children;
    }
}

function Post({ postPromise }) {
    return <p>{use(postPromise)}</p>;
}

export default function App() {
    const [id, setId] = useState(1);
    const [postPromise, setPostPromise] = useState(() => fetchPost(1));

    function open(next) {
        setId(next);
        setPostPromise(fetchPost(next));
    }

    return (
        <div>
            <button onClick={() => open(1)}>Post 1</button>
            <button onClick={() => open(2)}>Post 2</button>
            <ErrorBoundary key={id}>
                <Suspense fallback={<p>Loading...</p>}>
                    <Post postPromise={postPromise} />
                </Suspense>
            </ErrorBoundary>
        </div>
    );
}

Post 2を開くと、バウンダリがエラーメッセージを表示します。もう一度Post 1を開くと動きます。key={id} がバウンダリに投稿ごとの新しいstateを与えるので、古いエラーを表示し続けることがないからです。

保留中やrejectされた use を try/catch で捕まえることはできません。Promiseが保留中の間、use は特別な値を投げてレンダリングを中断し、その周りの catch はそれを飲み込んでしまいます。捕まえた値は「Suspense Exception: This is not a real error!」で始まるメッセージのエラーで、開発中はReactが「use was called from inside a try/catch block」とも記録します。エラー画面の代わりに代わりの値を表示したいなら、下へ渡す前にPromiseでrejectを処理してください。

const postPromise = fetchPost(id).catch(() => 'This post could not be loaded.');

useとuseEffectでのデータ取得の比較

クライアントの古典的なパターンは、エフェクトでデータを取得し、3つのstateを持つものです。

function Profile({ id }) {
    const [user, setUser] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        let ignore = false;
        fetchUser(id).then(
            (u) => !ignore && setUser(u),
            (e) => !ignore && setError(e),
        );
        return () => {
            ignore = true;
        };
    }, [id]);

    if (error) return <p>Error</p>;
    if (!user) return <p>Loading...</p>;
    return <p>{user.name}</p>;
}

エフェクト版はそれだけで完結しているので、フレームワークのないアプリでは今も最もよく使われる方法です。詳しくはデータの取得のページで扱っています。use が真価を発揮するのは、コンポーネントより上の何かが早めにリクエストを始め、Promiseを下へ渡すときです。