React の新機能とコード例の探索

React 19 は、開発者のエクスペリエンスとアプリケーションのパフォーマンスを向上させることを目的とした機能が満載です。コードの最適化から強力な新しいフックの導入に至るまで、React 19 は最新の Web アプリケーションを構築するための頼りになるライブラリとしての地位を確固たるものにし続けています。主要な機能を詳しく見て、実用的なコード例を使用して、それらの機能が開発プロセスにどのような変革をもたらすかを探ってみましょう。

---

React 19 の主な機能

1. React コンパイラー

新しい React Compiler は、コードを効率の高い JavaScript に変換することでコードを簡素化し、最適化します。これにより、メモ化などの手動によるパフォーマンス調整の必要がなくなり、開発者はパフォーマンスの微調整ではなく機能の構築に集中できるようになります。

例:

// Before: Manual optimization with useCallback
const MemoizedComponent = React.useCallback(() => {
  return <div>Optimized!</div>;
}, []);

// After: Automatically optimized
function Component() {
  return <div>Optimized!</div>;
}

---

2. サーバーコンポーネント

React 19 のサーバー コンポーネントは、サーバー上でコンポーネントをレンダリングすることにより、クライアントに送信される JavaScript の量を削減します。これによりパフォーマンスが向上し、ページの読み込みが高速化されます。

例:

// ServerComponent.server.jsx
export default function ServerComponent() {
  return <div>This is rendered on the server.</div>;
}

// App.jsx
import ServerComponent from './ServerComponent.server';

function App() {
  return (
    <div>
      <h1 id="Welcome-to-React">Welcome to React 19</h1>
      <servercomponent></servercomponent>
    </div>
  );
}

---

3. アクション

アクションにより、状態の更新とエラー処理が簡素化されます。関数に「アクションの使用」ディレクティブをマークすることにより、React は保留状態、エラー、オプティミスティック更新を自動的に管理します。

例:

function UpdateName() {
  const [name, setName] = useState('');

  const handleSubmit = async () => {
    'use action';
    await updateName(name);
  };

  return (
    

setName(e.target.value)} /> Submit

); }

---

4. 新しいフック: use()、useFormStatus()、および useOptimistic()

データフェッチ用の use()

use() フックを使用すると、開発者はコンポーネント内で直接 Promise を処理できます。

例:

function DataFetchingComponent() {
  const data = use(fetchData());

  return (
    <div>
      <h1 id="Data">Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}