React 19の新機能と変更点まとめ

React 19 の主な新機能

React 19 は 2024年12月に正式リリースされました。フォーム処理・非同期処理・Serverコンポーネントまわりが大きく改善されています。

Actions — 非同期処理の新しい書き方

React 19 では、フォームの送信や非同期ミューテーションを処理する「Actions」というパターンが公式サポートされました。

// 従来のパターン
const [isPending, setIsPending] = useState(false);
const [error, setError] = useState(null);

async function handleSubmit(e) {
  e.preventDefault();
  setIsPending(true);
  try {
    await submitForm(formData);
  } catch (err) {
    setError(err.message);
  } finally {
    setIsPending(false);
  }
}

// React 19 の useActionState
import { useActionState } from "react";

async function submitAction(prevState, formData) {
  try {
    await submitForm(formData);
    return { success: true };
  } catch (err) {
    return { error: err.message };
  }
}

function Form() {
  const [state, action, isPending] = useActionState(submitAction, null);

  return (
    <form action={action}>
      <input name="email" />
      <button disabled={isPending}>
        {isPending ? "送信中..." : "送信"}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

`use()` — Promise とコンテキストの読み取り

use() は Hooks のルール（コンポーネントのトップレベルのみ）から解放された新しい API です。

import { use, Suspense } from "react";

// Promise を直接 use() で読む
function UserProfile({ userPromise }) {
  const user = use(userPromise); // Suspense がフォールバックを処理
  return <div>{user.name}</div>;
}

// Context を条件分岐の中で読む
function Component({ show }) {
  if (show) {
    const theme = use(ThemeContext); // 条件分岐の中でも使える
    return <div style={{ color: theme.color }}>...</div>;
  }
  return null;
}

`ref` が prop として渡せるように

forwardRef が不要になりました。

// 以前
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

// React 19 から — ref を普通の prop として受け取れる
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// 使う側
<Input ref={myRef} />

`useOptimistic` — 楽観的 UI 更新

import { useOptimistic, useTransition } from "react";

function LikeButton({ liked, count, onLike }) {
  const [optimisticLiked, setOptimistic] = useOptimistic(liked);
  const [_, startTransition] = useTransition();

  function handleClick() {
    startTransition(async () => {
      setOptimistic(!optimisticLiked); // UI を即時更新
      await onLike(); // サーバーリクエスト（失敗したら巻き戻る）
    });
  }

  return (
    <button onClick={handleClick}>
      {optimisticLiked ? "❤️" : "🤍"} {count}
    </button>
  );
}

Document Metadata のサポート

コンポーネントの中に <title> や <meta> を書けるようになり、react-helmet などが不要になりました。

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title} | TechBlog</title>
      <meta name="description" content={post.description} />
      <article>{post.content}</article>
    </>
  );
}

Stylesheet の優先度管理

function Component() {
  return (
    <>
      <link rel="stylesheet" href="/theme.css" precedence="default" />
      <link rel="stylesheet" href="/override.css" precedence="high" />
      <div>...</div>
    </>
  );
}

まとめ

React 19 は フォーム処理と非同期ミューテーションまわりの DX が大幅に改善されました。useActionState・use()・useOptimistic の3つが特に実用的で、ボイラープレートを大幅に削減できます。forwardRef の廃止も歓迎されるシンプル化です。

参考: React 19 公式ブログ

S	公式ソース確認済み
A	成功実績多数・失敗例少数
B	賛否両論
C	動作未確認・セキュリティリスク高
Z	個人所感