React の新機能、それが重要な理由、および移行のヒント

また行きます — React の新機能についての別の投稿です。しかし、正直に言って、これはそれだけの価値があります。 React 19 は、2024 年 4 月にリリースされた リリース候補 (RC) から、強力なアップデートが満載された安定版リリースに正式に移行しました。 React 19 は、パフォーマンスの向上から新しいフックやツールに至るまで、小規模なアプリの構築でもエンタープライズ グレードのソリューションの構築でも、あらゆる人に何かを提供します。

プロジェクトをシームレスにアップグレードするのに役立つコード例と移行のヒントを使用して、新機能を詳しく見ていきましょう。

React 19 の新機能

1.パフォーマンスの最適化

React 19 の導入内容:

• 選択的なハイドレーションの強化: 必要に応じて UI の一部のみをハイドレーションすることで、サーバーでレンダリングされるアプリのハイドレーションを最適化します。
• バンドル サイズの縮小: React 19 のライブラリは軽量であるため、ロード時間が短縮され、ネットワーク使用量が削減されます。

例: 効率的な水分補給

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
hydrateRoot(container, <App />);

2.新しいフックと強化されたフック

a. useFormStatus: 簡素化されたフォーム状態管理

新しい useFormStatus フックを使用すると、フォームの管理が簡単になります。カスタム コンテキストやプロパティのドリルを必要とせずに、フォームの保留状態を追跡します。

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

b. useDeferredValue:initialValue オプション

更新された useDeferredValue フックにより、遅延データの処理中に初期フォールバック値をレンダリングすることで、UI の移行がよりスムーズになります。

import { useDeferredValue } from 'react';

function Search({ deferredValue }) {
  const value = useDeferredValue(deferredValue, '');

  return <Results query={value} />;
}

c. useOptimistic: オプティミスティックな更新を処理します

新しい useOptimistic フックにより、楽観的な UI 更新が簡単になります。

import { useOptimistic } from 'react';

function LikeButton() {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(0);

  function handleLike() {
    setOptimisticLikes(prev => prev + 1);
    fetch('/api/like', { method: 'POST' });
  }

  return <button onClick={handleLike}>Likes: {optimisticLikes}</button>;
}

3.ドキュメントメタデータホイスティング

React 19 は、