react-patterns

React

概要

コンポーネントアーキテクチャ、パフォーマンス最適化、状態管理、データ取得、最新の React 19 以降の API を扱います。React Compiler との互換性、Server Components、データ取得のウォーターフォールの解消を優先します。

使用する場面： React アプリケーションの構築、パフォーマンスの最適化、状態管理の選択、データ取得の実装、コンポーネントアーキテクチャのレビュー。

使用しない場面： React 以外のフレームワーク、React を使わない純粋なサーバーサイドレンダリング、インタラクティブ性のない静的サイト。

クイックリファレンス

パターン	API ／アプローチ	主なポイント
データ取得	use(dataPromise)	useEffect と useState を使った取得パターンを置き換えます
フォーム処理	useActionState(action, init)	保留中の状態とエラー処理を標準で備えています
楽観的 UI	useOptimistic(state, updateFn)	サーバーの処理中に即座にフィードバックを返します
緊急性の低い更新	useTransition()	更新を中断可能としてマークします
エフェクトイベント	useEffectEvent(fn)	エフェクトを再実行せずにリアクティブな値を扱います
フォームの保留状態	useFormStatus()	子コンポーネントから親フォームの保留状態を読み取ります
一意の ID	useId()	アクセシビリティに適した、ハイドレーション対応の ID
サーバー状態	React Query ／ useSuspenseQuery	キャッシュ、重複排除、バックグラウンドでの再取得
クライアント状態（ローカル）	useState ／ useRef	単一コンポーネントまたは一時的な値
クライアント状態（グローバル）	Zustand ／ Context	コンポーネント間で共有するクライアント専用の状態
派生状態	レンダリング中に計算	派生値をエフェクトで同期しないでください
遅延初期化	useState(() => expensive())	レンダリングごとの不要な即時計算を避けます
コンポーネントの種類	Page、Feature、UI	ルートのエントリーポイント、ビジネスロジック、再利用可能なプリミティブ
メモ化	まず React Compiler を信頼する	必要な場合に限り、手動で useMemo／useCallback を使用します
ref を prop として渡す	関数コンポーネントの ref prop	React 19 では forwardRef は不要です
ref のクリーンアップ	ref コールバックから関数を返す	デタッチ時に null を呼び出す代わりに、クリーンアップが実行されます
コード分割	React.lazy() + Suspense	重いコンポーネントを遅延読み込みします
並列フェッチ	Promise.all()	順次実行による await のウォーターフォールを解消します
リクエストの重複排除	React.cache()	リクエストごとのサーバーサイド重複排除
サーバー処理の中止	cacheSignal()	クライアントの切断時に高負荷な非同期処理をキャンセルします
リソースの事前読み込み	prefetchDNS、preconnect、preload、preinit	コンポーネントからのリソース読み込みを最適化します
状態の保持	<Activity>	状態をマウントしたまま UI を非表示にします

よくある間違い

間違い	正しいパターン
useState とともに useEffect でデータを取得する	キャッシュ機能が組み込まれたデータ取得には、use() API または React Query を使用します
派生値を state に保存し、effect で同期する	派生値はレンダー中に計算します。state の同期に effect は使用しないでください
すべてを useMemo と useCallback でラップする	まず React Compiler を信頼します。手動でメモ化するのは、計算コストの高い処理やメモ化された子要素に限ります
state を変更する array.sort() を使用する	予期しない再レンダーを避けるため、不変のソートには array.toSorted() を使用します
条件付きレンダリングに && を使用する	0 のような falsy 値がレンダリングされないよう、三項演算子 condition ? <Component /> : null を使用します
ID に Math.random() または Date を使用する	ハイドレーションに安全な一意の識別子には useId() を使用します
最新の値を読み取るため、リアクティブな値を effect の依存配列に入れる	effect を再実行せずに最新の値へアクセスするには useEffectEvent を使用します
effect の依存値としてオブジェクトリテラルを作成する	静的なオブジェクトはコンポーネントの外に移動するか、プリミティブ値を依存値として使用します
React 19 のプロジェクトで forwardRef を使用する	ref を props として直接渡します。React 19 では forwardRef は非推奨です
レンダー中に props または state を変更する	React Compiler との互換性のため、純粋なレンダーと副作用のない処理という React のルールに従います

委任

• コンポーネントのアーキテクチャを調査し、パフォーマンスのボトルネックを特定する：Explore エージェントを使用して、再レンダーのプロファイリング、バンドルサイズの分析、データ取得のウォーターフォールの追跡を行います
• 適切なパターンで React の機能を実装する：Task エージェントを使用して、Server Component、Suspense、React 19 の規約に沿ったコンポーネントを構築します
• フロントエンドのアーキテクチャと状態管理の方針を設計する：Plan エージェントを使用して、コンポーネント階層の構成、状態管理の選定、データ取得方法の計画を行います

shadcn-ui スキルが利用可能な場合は、コンポーネントのバリアントやテーマに関する質問を委任してください。 tailwind スキルが利用可能な場合は、ユーティリティファーストのスタイリングやデザイントークンに関する質問を委任してください。 zustand スキルが利用可能な場合は、クライアント側のグローバル状態管理に関する質問を委任してください。

参考資料

• コンポーネントのパターン、状態管理、useEffect の判断
• パフォーマンスの最適化：ウォーターフォール、バンドル、再レンダー
• Hooks、Server Actions、React 19 API
• React Compiler のパターンと再レンダーの最適化
• サーバーサイドレンダリングと React Server Components
• アンチパターンとトラブルシューティングガイド