React 19が変えたこと
React 19は単なるマイナーアップデートではなく、フレームワークのパラダイムシフトです。Server Componentsの安定化、新フックの追加、コンパイラの導入により、開発者の書き方が根本から変わります。
Server Componentsの安定化
React Server Components（RSC）が安定版となりました。サーバー側でレンダリングし、クライアントにHTMLを送信することでバンドルサイズを削減します。
// app/page.jsx — Server Component（デフォルト）
export default async function Home() {
const posts = await db.query('SELECT * FROM posts');
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
useStateやuseEffectを使うコンポーネントは、ファイルの先頭で"use client"と宣言します。
use()フックの導入
React 19で最も注目すべき新機能はuse()フックです。これによりコンポーネント内で直接Promiseを解決できます。
function Comments({ commentsPromise }) {
const comments = use(commentsPromise);
return comments.map(c => <p key={c.id}>{c.text}</p>);
}
use()は条件分岐やループ内でも使えるため、従来のフックの制約から解放されます。
Server Actionsによるフォーム処理
Server Actionsを使うと、クライアントのJavaScriptを書かずにフォームを処理できます。
export default function CreatePost() {
async function handleSubmit(formData) {
'use server';
const title = formData.get('title');
await db.execute('INSERT INTO posts (title) VALUES (?)', [title]);
revalidatePath('/');
}
return (
<form action={handleSubmit}>
<input name="title" required />
<button type="submit">作成</button>
</form>
);
}
React Compiler（旧React Forget）
React 19のコンパイラは、useMemoやuseCallbackを自動的に挿入します。v19に対応したコードベースでは、これらの最適化フックを手動で書く必要がなくなります。
主な非推奨API
- componentWillMountなど旧ライフサイクルは完全削除
- ReactDOM.render()はcreateRoot()に一本化
- PropTypesの公式サポート終了
React 19への移行は、プロジェクトの規模によって1日から1週間程度を見積もっておくと安心です。