React19が間もなく登場します。以下は新機能です

React Compiler

React Compilerは新しいビルド時のツールで、Reactアプリケーションのパフォーマンスを向上させるために自動的に最適化します。特に再描画時にそのパフォーマンスを高めることができます。

自動的にコードをメモ化する機能があり、useMemo、useCallback、React.memoなどのAPIを通じてメモ化を知っているかもしれません。これらのAPIはReactに伝えて、アプリケーションの一部の入力が変更されていない場合、更新時に再計算する必要がないため、更新の労力を減らすことができます。

したがって、React Compilerは大量の状態更新が必要な複雑なアプリケーションにおいて、パフォーマンスを向上させるのに非常に適しています。

React Compilerはオープンソース化と本番利用に向けて発展しています

• React Compilerは研究プロジェクトではなく、現在はInstagramの本番環境で動作しています
• チームはcompilerを他のMetaプラットフォームに展開し、オープンソースとして公開する予定です
• compilerは状態の変化に基づいて自動的に再描画を最適化し、手動でのメモ化の必要性を排除することを目的としています
• compilerは厳格なReactルールに従い、コード変換の安全性と予測可能性を確保します

Rect19 RC

この新しいバージョンでは、具体的にどのような変更がありますか?

1、アクション

Actionsは、Webページでのデータの処理や操作を簡素化します。たとえば、

ユーザーが名前を変更するためにフォームを送信すると、APIリクエストを開始し、応答を処理します。

React 19RC、待機状態、エラー、フォーム、最適化更新、シーケンシャル要求を自動的に処理するために、変換で非同期関数を使用するサポートを追加しました。したがって、Actionsは、データの変更や状態の更新を処理する必要がある対話型アプリケーションに最適です。

たとえば、待機状態とエラー状態useStateを処理できます。

// Before Actions function
function UpdateName({ setName, setError, setIsPending, redirect }) {
  const [name, setNameLocal] = useState(""); 
  const [error, setErrorState] = useState(null);
  const isPending = useState(false); 
  const setIsPendingLocal = useState(false)[1]; 

  const handleSubmit = async () => {
    setIsPendingLocal(true); 
    try {
      const updateError = await updateName(name); 
      if (updateError) {
        setErrorState(updateError); 
        return;
      }
      redirect("/path");
    } finally {
      setIsPendingLocal(false); 
    }
  };

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setNameLocal(event.target.value)} 
      />
      <button
        onClick={handleSubmit}
        disabled={isPending[0]}
      >
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19では、変換中に非同期関数の使用をサポートしました。これにより、待機状態、エラー、フォーム、楽観的更新を自動的に処理できます。
useTransitionを使用して待機状態を処理することができます。

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();
  const handleSubmit = () => {
    startTransition(async () => {
      try {
        const updateError = await updateName(name);
        if (updateError) {
          setError(updateError);
          return; 
        }
        redirect("/path");
      } catch (e) {
        console.error(e);
      }
    });
  };

非同期変換はすぐに isPending ステータスを true に設定し、非同期リクエストを発信します。そして、変換が完了した後に isPending は false に切り替わります。これにより、データが変化する際に現在の UI を応答性とインタラクティブ性を保ちます。

それ以外にも、Actions は以下の能力を提供します：

• Pending state：操作は待機状態を提供し、リクエストが開始された時点から開始され、最終状態の更新が提出された際に自動的にリセットされます
• Optimistic updates：操作は新しい useOptimistic フックをサポートしており、リクエストを提出する際にユーザーに即時のフィードバックを表示することができます
• Error handling：操作はエラーハンドリングを提供し、リクエストが失敗した際にエラー境界を表示し、楽観的更新を自動的に元の値に戻すことができます
• Forms： 要素は今、関数を action と formAction プロップに渡すことをサポートしています。関数を action プロップに渡すと、デフォルトで Actions を使用し、送信後に自動的にフォームをリセットします

2、Server Components

React 19 RCは、「サーバーコンポーネント」という概念を導入しました。これにより、サーバー上でコンポーネントをレンダリングすることができます。これにより、ページの読み込み速度が向上し、SEOも改善されます。そのため、Server Componentsは迅速な応答と効率的なSEOを必要とするWebアプリケーションに非常に適しています。

サーバーコンポーネントは、バンドル前にクライエントサイドアプリケーションまたはSSRサーバーとは別の環境で事前に提示される新しいタイプのコンポーネントです。

この個別の環境は、React Server Componentsの「サーバー」です。サーバーコンポーネントは、ビルド時にCIサーバー上で一度だけ実行することも、Webサーバーを使用してリクエストごとに実行することもできます。

3、アセットローディング

通常、ビューは最初にブラウザでレンダリングされ、次にスタイルシート、フォント、画像がレンダリングされます。これにより、スタイルのないビューからスタイルのあるビューへの点滅が発生する可能性があります。これは、スタイルのないコンテンツの点滅（FOUC）と呼ばれます。

React 19以前:FOUCの問題を緩和するために、開発者は通常、カスタムコードを追加してリソースの準備が整ったことを検出し、すべてのコンテンツが読み込まれた後にのみビューが表示されるようにします。ただし、この方法は複雑で面倒な場合があります。

これで、アセットローディングでリソースをバックグラウンドで読み込むことができるようになり、ページの遷移が改善されます。これにより、ユーザーが現在のページを閲覧しているときに、バックグラウンドでリソースを読み込むことができます。この最適化により、Reactアプリケーションのパフォーマンスが向上するだけでなく、ユーザーがより快適に閲覧できるようになります。

4、Document Metadata

Document Metadataは、開発者がより少ないコードでより多くの作業を実行できるようにする今後の改善です。

たとえば、HTMLでは、ドキュメントのメタデータラベル(

、、および)は、ドキュメントのセクションに配置するために予約されています。Reactでは、アプリケーションに適したメタデータを決定するコンポーネントが、レンダリングする場所から非常に離れているか、またはReactがまったくレンダリングしない場合があります。

これまでは、これらの要素をエフェクトに手動で挿入するか、react-helmetなどのライブラリを介して挿入する必要があり、サーバーがReactアプリケーションをレンダリングする際には注意が必要でした。

React 19では、コンポーネント内のドキュメントメタデータラベルのネイティブレンダリングのサポートが追加されました。

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <h2>{post.title}</h2>
      <meta name="author" content="x" />
      <link rel="author" href="https://twitter.com/x/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        something...
      </p>
    </article>
  );

Reactがこのコンポーネントをレンダリングすると、

とタグが表示され、自動的にドキュメントセクションに昇格します。これらのメタデータラベルをネイティブにサポートすることで、クライアント専用アプリケーション、ストリーミングSSR、サーバーコンポーネントで動作することを保証できます。

5.カスタム要素をサポートします

React 19は、カスタム要素の完全なサポートを追加し、Custom Elements Everywhereのすべてのテストに合格しました。

過去のバージョンでは、Reactが認識できないpropsをプロパティ（プロパティ）ではなくプロパティ（属性）として扱うため、Reactでカスタム要素を使用することは困難でした。React 19では、次のポリシーにより、クライエントサイドおよびSSR中に機能するプロパティのサポートを追加しました。

• サーバーサイドレンダリング:カスタム要素に渡されるpropsの型がプリミティブ値(例えばstring、numberまたは)の場合、それらはtrueプロパティとしてレンダリングされます。プリミティブ型以外のprops(例えばobject、symbol、functionまたは)の値falseは省略されます
• クライエントサイドレンダリング:カスタム要素インスタンスのプロパティに一致するpropsはプロパティとして割り当てられ、それ以外の場合はプロパティとして割り当てられます

Reactの開発方向

実際、最近の2つの主要なバージョンの機能から、現在のReactの改善の方向性は、主にReactのパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させ、開発者の作業を簡素化することであることがわかります。

React Compilerはアプリケーションのパフォーマンスを向上させ、Asset Loadingはユーザーエクスペリエンスを向上させ、Actionsは開発者の作業を簡素化します。さらに、Server ComponentsとCustom Elementsのサポートにより、Reactはさまざまな複雑なニーズに対応するための柔軟性と堅牢性を高めることができます。