React 19がリリースされ、Webフロントエンド開発に大きな変化をもたらしています。本記事ではReact 19の主要新機能を実際のコード例とともに解説します。Next.jsやRemixなどのフレームワークと組み合わせることで、さらに強力な開発が可能になります。
React 19の主要新機能一覧
- use Hook：Promiseやコンテキストの読み取りに対応した新しいHook
- Server Actions（安定版）：サーバー側の関数をクライアントから直接呼び出し
- 強化されたフォーム処理：formAction・useFormStatus・useFormStateの改善
- ref as prop：forwardRefなしでrefを直接propsとして渡せる
- useDeferredValue改善：initial valueのサポート
- Document Metadata：title・meta・linkタグのコンポーネント内直接記述
use Hookの使い方
use Hookは、Promiseやコンテキストの値をコンポーネント内で直接読み取れる新しいHookです。条件文やループ内でも使える柔軟性が特徴です。
// use Hook でPromiseを読み取る
import { use, Suspense } from "react";
function UserProfile({ userPromise }) {
// useでPromiseを直接読み取る（Suspenseと組み合わせて使用）
const user = use(userPromise);
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
function App() {
const userPromise = fetchUser(123);
return (
<Suspense fallback={<div>Loading...</div>}>
<UserProfile userPromise={userPromise} />
</Suspense>
);
}
// useをif文内で使える（通常のHooksルールと異なる）
function ConditionalComponent({ isAdmin }) {
if (isAdmin) {
const adminData = use(adminDataPromise); // ✅ OK
return <AdminPanel data={adminData} />;
}
return <UserPanel />;
}フォーム処理の大幅改善
React 19では、フォームの処理がより直感的になりました。useActionState（旧useFormState）とuseFormStatusを使うことで、フォームの状態管理が格段に簡単になります。
import { useActionState } from "react";
// Server Action
async function submitForm(prevState, formData) {
const name = formData.get("name");
const email = formData.get("email");
try {
await saveToDatabase({ name, email });
return { success: true, message: "登録完了しました！" };
} catch (error) {
return { success: false, message: "エラーが発生しました" };
}
}
// クライアントコンポーネント
export function ContactForm() {
const [state, formAction, isPending] = useActionState(submitForm, null);
return (
<form action={formAction}>
{state?.message && (
<p className={state.success ? "success" : "error"}>
{state.message}
</p>
)}
<input name="name" placeholder="名前" required />
<input name="email" type="email" placeholder="メール" required />
<button type="submit" disabled={isPending}>
{isPending ? "送信中..." : "送信する"}
</button>
</form>
);
}ref as props（forwardRef廃止）
React 19からは、refを通常のpropsとして渡せるようになりました。これにより、forwardRefラッパーが不要になります。
// React 19以前（forwardRefが必要）
const Input = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});
// React 19以降（refをそのままpropsで受け取れる）
function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}
// 使い方は同じ
function Form() {
const inputRef = useRef(null);
return <Input ref={inputRef} type="text" />;
}Document Metadataの直接記述
React 19では、title・meta・linkタグをコンポーネント内に直接書けるようになりました。react-helmetなどのライブラリが不要になります。
function BlogPost({ post }) {
return (
<article>
{/* React 19: コンポーネント内でメタデータを直接記述 */}
<title>{post.title} | Tech Athletes</title>
<meta name="description" content={post.excerpt} />
<meta property="og:title" content={post.title} />
<link rel="canonical" href={`https://tech-athletes.com/blog/${post.slug}`} />
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}まとめ：React 19移行のポイント
- use Hookは既存のSuspenseパターンをより使いやすくする
- Server Actions安定版でAPIエンドポイントレスな開発が本格化
- forwardRef廃止でコードがシンプルになる
- Document Metadataでreact-helmetが不要に
React 19への移行は基本的に段階的に進めることができます。既存のコードを壊さずに新機能を少しずつ採用していくのがおすすめです。Next.js 15と組み合わせることで、React 19の全機能を最大限に活用できます。