React 19は、Meta（旧Facebook）が開発するJavaScriptライブラリの最新バージョンです。2024年12月に正式リリースされたReact 19では、Server Components、Actions、新しいHooksなど革新的な機能が多数追加されました。本記事では、React 19の新機能と実践的な使い方を徹底解説します。

React 19の主要な新機能一覧

• Server Components（安定版）：サーバーサイドでレンダリングするコンポーネント
• Actions：フォーム送信やデータ変更を簡素化する新機能
• useFormStatus：フォームの送信状態を追跡する新Hook
• useActionState：アクションの実行状態を管理する新Hook（旧useFormState）
• useOptimistic：楽観的UIアップデートのための新Hook
• use()：Promiseを直接読み込める新Hook
• ref as a prop：forwardRefが不要に。refを直接propsとして渡せるように
• Document Metadata：titleタグ等をコンポーネント内に直接記述可能

React 19新機能の使い方：実践コード例

1. Actions – フォーム送信を簡素化

React 19のActionsにより、フォームのactionに非同期関数を直接渡せるようになりました。

// React 19 - Actionsを使ったフォーム送信
async function submitAction(formData) {
  'use server';
  const name = formData.get('name');
  const email = formData.get('email');
  await saveUserToDatabase({ name, email });
  redirect('/success');
}

function ContactForm() {
  return (
    

      
      
      送信
    
  );
}

2. useFormStatus – フォームの送信状態を管理

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending, data, method } = useFormStatus();
  
  return (
    
      {pending ? '送信中...' : '送信する'}
    
  );
}

// 親コンポーネント内で使用
function MyForm() {
  return (
    

      
      
    
  );
}

3. useActionState – アクションの状態管理

import { useActionState } from 'react';

async function addToCart(prevState, formData) {
  const productId = formData.get('productId');
  const result = await addProductToCart(productId);
  if (result.success) {
    return { message: 'カートに追加しました！', error: null };
  }
  return { message: null, error: result.error };
}

function CartButton({ productId }) {
  const [state, dispatch, isPending] = useActionState(addToCart, {
    message: null,
    error: null
  });
  
  return (
    

      
      
        {isPending ? '追加中...' : 'カートに追加'}
      
      {state.message && 
{state.message}
}
      {state.error && 
{state.error}
}
    
  );
}

4. useOptimistic – 楽観的UIアップデート

import { useOptimistic, useTransition } from 'react';

function MessageList({ messages }) {
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentMessages, newMessage) => [
      ...currentMessages,
      { id: Date.now(), text: newMessage, sending: true }
    ]
  );
  
  const [isPending, startTransition] = useTransition();
  
  async function sendMessage(text) {
    addOptimisticMessage(text); // 即座にUIを更新
    await saveMessageToServer(text); // バックグラウンドで保存
  }
  
  return (
    

      {optimisticMessages.map(msg => (
        

          {msg.text}
          {msg.sending &&  (送信中...)}
        
      ))}
    
  );
}

5. ref as a prop – forwardRefが不要に

// React 19以前
const InputOld = forwardRef((props, ref) => (
  
));

// React 19以降 - refを直接propsとして受け取れる
function Input({ ref, ...props }) {
  return ;
}

// 使用例
function App() {
  const inputRef = useRef(null);
  return ;
}

6. Document Metadata – タイトル・メタタグをJSX内に記述

// React 19では
      
      
      
      
{post.title}
      
{post.content}