React 19の新機能まとめ | 全国個人事業主支援協会

COLUMN コラム

React 19の新機能まとめ

2025年09月10日
React 19の新機能まとめ
- 未分類

React 19が2024年12月にリリースされ、いくつかの重要な機能が追加されました。今回は主要な変更点についてまとめていきます。

1. React Compiler

React 19の最大の目玉機能として、React Compilerが正式に導入されました。これまでuseMemo、useCallback、React.memoなどを使って手動で最適化していた部分を、コンパイラが自動的に処理してくれるようになりました。

javascript

// 以前のコード
const ExpensiveComponent = React.memo(({ data }) => {
  const processedData = useMemo(() => processData(data), [data]);
  return <div>{processedData}</div>;
});

// React 19では自動最適化される
const ExpensiveComponent = ({ data }) => {
  const processedData = processData(data);
  return <div>{processedData}</div>;
};

2. Actions

フォーム処理が大幅に簡素化されました。新しいaction属性を使うことで、非同期処理を含むフォーム送信が簡単に実装できるようになりました。

javascript

function ContactForm() {
  async function submitForm(formData) {
    await fetch('/api/contact', {
      method: 'POST',
      body: formData
    });
  }

  return (
    <form action={submitForm}>
      <input name="email" type="email" />
      <button type="submit">送信</button>
    </form>
  );
}

useActionStateフックも追加され、送信状態の管理がより簡単になりました。

3. use() API

新しいuse() APIにより、PromiseやContextの値を同期的に取得できるようになりました。これはReactで初めて条件分岐内でも使用可能なフックです。

javascript

function Article({ id }) {
  const article = use(fetchArticle(id));
  
  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </article>
  );
}

4. Document Metadata のサポート

<title>、<meta>、<link>タグをコンポーネント内で直接使用できるようになりました。これまでreact-helmetなどのライブラリが必要だった処理が、標準機能として利用可能になりました。

javascript

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title} | My Blog</title>
      <meta name="description" content={post.excerpt} />
      <article>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </article>
    </>
  );
}

5. ref as a prop

refを特別な属性として扱う必要がなくなり、通常のpropとして渡せるようになりました。forwardRefは不要になります。

javascript

// 以前のコード
const MyInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// React 19
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}