React 19の新機能：削除されたAPIとアップグレード方法

React 19は、2024年12月にリリースされたReactのメジャーバージョンです。アクション（保留中の状態、エラー、フォームを管理するasync関数）、フック useActionState、useOptimistic、use、普通のpropとしての ref、そしてReactがドキュメントのheadに移動する <title> と <meta> タグが追加されました。React 19.2（2025年10月）では <Activity> と useEffectEvent が追加されました。

下のすべての例はReact 19.2で動きます。まずアクションです。フォームに渡したasync関数で、保留中の状態と返されたエラーは useActionState が扱います。

import { useActionState } from 'react';

function saveName(name) {
    // Stands in for a real request
    return new Promise((resolve) => setTimeout(resolve, 800));
}

async function updateName(previousState, formData) {
    const name = formData.get('name').trim();
    if (!name) {
        return { error: 'Please type a name.', saved: previousState.saved };
    }
    await saveName(name);
    return { error: null, saved: name };
}

export default function App() {
    const [state, formAction, isPending] = useActionState(updateName, {
        error: null,
        saved: null,
    });

    return (
        <form action={formAction}>
            <input name="name" placeholder="Your name" />
            <button type="submit" disabled={isPending}>
                {isPending ? 'Saving...' : 'Save'}
            </button>
            {state.error && <p style={{ color: 'crimson' }}>{state.error}</p>}
            {state.saved && <p>Saved as {state.saved}.</p>}
        </form>
    );
}

欄を空のままSaveを押してエラーを確認し、次に名前を入力して保存してください。ボタンは800ミリ秒の間「Saving...」と表示されます。エラーのための useState も、isLoading フラグも、e.preventDefault() もありません。

アクションとフォームアクション

React 18では、どのフォームでも同じ手順を書いていました。デフォルトの送信を防ぎ、読み込み中フラグを立て、リクエストをawaitし、エラーを保存し、フラグを下ろす、です。React 19は、トランジションの中で非同期の作業をする関数をアクションと呼び、その事務処理を代わりにやってくれます。

• startTransition（と useTransition）がasync関数を受け付けるようになりました。isPending は関数全体が終わるまで true のままです。
• <form action={fn}> は、フォームが送信されたときにフォームの FormData を渡して fn を呼びます。これはアクションとして実行され、終わるとReactがフォームの非制御の項目をリセットします。
• <button formAction={fn}> は、1つの送信ボタンに独自のアクションを与えます。
• useActionStateはアクションが最後に返した値を保つので、アクションはエラーメッセージや保存したレコードを返せます。
• react-dom の useFormStatus を使えば、フォームの中のコンポーネントが、propsを下へ渡さずにそのフォームが送信中かどうかを読めます。親の <form> が必要なので、ここでは静的なブロックで示します。

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

useOptimistic

useOptimistic は、アクションの実行中に予想される結果を表示し、アクションが終わると本当のstateに戻ります。いいねのカウンターは、クリックした瞬間に増え、リクエストが失敗したら元に戻せます。

const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

useOptimisticのページには、わざと失敗する偽のAPIを使った動く例があり、ロールバックの様子を観察できます。

use API

use はPromiseやコンテキストから値を読みます。Promiseの場合は、Promiseが解決するまでコンポーネントをサスペンドさせ、その間は最も近い <Suspense> がフォールバックを表示します。ほかのすべてのフックと違い、use は if やループの中、そして早期 return の後でも呼べます。

React 19では、<ThemeContext.Provider> の代わりに <ThemeContext value="dark"> を直接描画することもできます。次の例ではその両方が登場します。

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

const ThemeContext = createContext('light');

function Badge({ show }) {
    if (!show) return null;
    // A normal hook could not be called after an early return. use can.
    const theme = use(ThemeContext);
    const dark = theme === 'dark';
    return (
        <span style={{ padding: '2px 8px', background: dark ? '#222' : '#eee', color: dark ? '#fff' : '#222' }}>
            Theme: {theme}
        </span>
    );
}

export default function App() {
    const [theme, setTheme] = useState('light');
    const [show, setShow] = useState(true);

    return (
        <ThemeContext value={theme}>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Switch theme</button>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} badge</button>
            <p>
                <Badge show={show} />
            </p>
        </ThemeContext>
    );
}

propとしてのrefと、refのクリーンアップ

関数コンポーネントは、ほかのpropと同じように ref を受け取るようになりました。refをDOM要素まで渡すために、forwardRef で包む必要はもうありません。

import { useRef } from 'react';

function TextField({ label, ref }) {
    return (
        <label>
            {label} <input ref={ref} />
        </label>
    );
}

export default function App() {
    const inputRef = useRef(null);

    return (
        <div>
            <TextField label="Email" ref={inputRef} />
            <button onClick={() => inputRef.current.focus()}>Focus the field</button>
        </div>
    );
}

refコールバックはクリーンアップ関数を返すこともできます。エフェクトのクリーンアップと同じように、Reactは要素が画面から消えるときにそれを呼びます。何も返さないコールバックは、React 18と同じく、取り除かれるときに null を渡して呼ばれます。

import { useState } from 'react';

export default function App() {
    const [visible, setVisible] = useState(true);

    return (
        <div>
            <button onClick={() => setVisible(!visible)}>{visible ? 'Remove' : 'Add'} the box</button>
            {visible && (
                <div
                    ref={(node) => {
                        console.log('attached to', node.tagName);
                        return () => console.log('cleanup: detached');
                    }}
                    style={{ marginTop: 8, padding: 12, background: '#e8f0fe' }}
                >
                    A box with a ref
                </div>
            )}
        </div>
    );
}

ボタンを何回かクリックしてコンソールを読んでください。取り除くたびにクリーンアップの行が、戻すたびに attached to DIV が記録されます。

ドキュメントのメタデータ

<title>、<meta>、<link> をコンポーネントのどこに描画しても、Reactがそれを <head> に移動します。ページのコンポーネントは、react-helmetのようなライブラリなしで自分のタイトルを設定できます。

import { useEffect, useState } from 'react';

function Article({ title }) {
    return (
        <article>
            <title>{title}</title>
            <meta name="description" content={`An article about ${title}`} />
            <h3>{title}</h3>
        </article>
    );
}

export default function App() {
    const [title, setTitle] = useState('Hooks');

    useEffect(() => {
        console.log('document.title is now:', document.title);
    }, [title]);

    return (
        <div>
            <button onClick={() => setTitle(title === 'Hooks' ? 'Actions' : 'Hooks')}>Open the other article</button>
            <Article title={title} />
        </div>
    );
}

プレビューには表示するブラウザのタブがないので、代わりにエフェクトが document.title をログに出します。記事を切り替えると、記録されるタイトルもそれに続きます。

スタイルシートも同じ扱いになりました。コンポーネントの中の <link rel="stylesheet" href="..." precedence="default" /> は、precedenceの順にheadへ1回だけ挿入され、Reactはそれを必要とする中身を表示する前に読み込みを待ちます。複数のコンポーネントが描画する <script async src="..."> は1回だけ読み込まれます。react-dom は、リソースのヒントのために preload、preinit、preconnect、prefetchDNS もエクスポートしています。

ActivityとuseEffectEvent（React 19.2）

<Activity mode="hidden"> は、子のstateを捨てずに隠します。ReactはDOMを隠し、エフェクトのクリーンアップを実行し、モードが再び "visible" になるとすべてを元に戻します。ユーザーが戻ってくると予想されるタブやパネルに向いています。

import { Activity, useEffect, useState } from 'react';

function Notes() {
    const [text, setText] = useState('');
    useEffect(() => {
        console.log('Notes effect: setup');
        return () => console.log('Notes effect: cleanup');
    }, []);
    return <textarea value={text} onChange={(e) => setText(e.target.value)} rows={3} placeholder="Type a note" />;
}

export default function App() {
    const [tab, setTab] = useState('notes');

    return (
        <div>
            <button onClick={() => setTab('notes')}>Notes</button>
            <button onClick={() => setTab('about')}>About</button>
            <div style={{ marginTop: 8 }}>
                <Activity mode={tab === 'notes' ? 'visible' : 'hidden'}>
                    <Notes />
                </Activity>
                {tab === 'about' && <p>Your note is kept while this tab is open.</p>}
            </div>
        </div>
    );
}

メモを入力し、Aboutに切り替えてから戻ってください。テキストは残っていて、コンソールを見ると、隠れている間はエフェクトがクリーンアップされていたことがわかります。<Activity> の包みを {tab === 'notes' && <Notes />} に置き換えると、切り替えるたびにメモが失われます。

useEffectEvent は、関数をエフェクトの依存値から外します。その関数は常に最新のpropsとstateを見ますが、それらが変わってもエフェクトは再起動しません。

function ChatRoom({ roomId, theme }) {
    const onConnected = useEffectEvent(() => {
        showNotification('Connected!', theme);
    });

    useEffect(() => {
        const connection = createConnection(roomId);
        connection.on('connected', () => onConnected());
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]); // theme is not a dependency
}

19.2では、Server Components向けの cacheSignal（cache() の結果がもう不要になったことを教えます）と、Chrome DevToolsのパフォーマンスパネルのPerformance Tracksも追加されました。React 19.1では、現在のコンポーネントをどのコンポーネントが描画したかを返す、開発専用の関数 captureOwnerStack が追加されました。

Server ComponentsとServer Functions

Server Componentsは、サーバーで（またはビルド時に）事前に実行され、その出力をブラウザに送るコンポーネントです。async にでき、データベースを直接読め、そのコードはクライアントに送られません。Server Functions（最初はServer Actionsと呼ばれていました）は、'use server' を付けたasync関数で、クライアントコンポーネントから普通の関数のように呼べます。どちらも、Next.jsのApp Routerのように、それをサポートするバンドラーを持つフレームワークが必要なので、このエディタでは動かせません。

// A Server Component: async, runs on the server only
export default async function Notes() {
    const notes = await db.notes.findMany();
    return notes.map((note) => <Note key={note.id} note={note} />);
}

// A Server Function, usable as a form action
async function createNote(formData) {
    'use server';
    await db.notes.create({ text: formData.get('text') });
}

削除・変更されたAPI

React 19では、何年も前から非推奨だったAPIが削除されました。

クラスコンポーネントは defaultProps を使い続けられます。エラーの報告方法も変わりました。エラーバウンダリが捕まえたエラーは console.error で1回だけ記録され、捕まえられなかったエラーは window.reportError に送られ、createRoot は自分で報告するための onCaughtError と onUncaughtError オプションを受け付けます。

React 19へのアップグレード

まずReact 18.3にアップグレードしてください。18.2と同じものですが、非推奨のAPIや、React 19が必要とするほかの変更について警告するので、アプリが動いているうちに直せます。React 19は新しいJSX変換も必要としますが、Viteや現行のすべてのフレームワークはすでにそれを使っています。それからReact 19をインストールします。

npm install react@^19 react-dom@^19
npm install --save-dev @types/react@^19 @types/react-dom@^19

公式のアップグレードガイドは、機械的な変更のためのcodemodを案内しています。1つ目は文字列ref、act のインポート、ReactDOM.render を扱い、2つ目はTypeScriptのコードを新しい型に合わせて更新します。

npx codemod@latest react/19/migration-recipe
npx types-react-codemod@latest preset-19 ./src

アップグレードした後も、アクションや新しいフックの採用を強制されることはありません。既存のコンポーネント、フック、クラスコンポーネントは動き続けるので、フォームを1つずつ <form action> に移していけます。