React ベストプラクティス

TypeScript とのペアリング

React を使用する際は、このスキルと typescript-best-practices を常に一緒に読み込んでください。TypeScript パターン(型優先開発、判別可能なユニオン、Zod 検証)は React コードに適用されます。

コア原則: Effects はエスケープハッチ

Effects を使用すると、React の外に「抜け出して」外部システムと同期することができます。ほとんどのコンポーネントロジックは Effects を使用すべきではありません。 Effect を書く前に、「Effect なしでこれを実現する方法はあるか?」と問いかけてください。

判定フロー

1. ユーザーインタラクションに応答する必要がある? イベントハンドラーを使用する
2. props/state から計算された値が必要? レンダー中に計算する
3. キャッシュされた高コスト計算が必要? useMemo を使用する
4. props の変更時に state をリセットする必要がある? key props を使用する
5. 外部システムと同期する必要がある? クリーンアップ付き Effect を使用する
6. Effect 内に非リアクティブなコードが必要? useEffectEvent を使用する
7. レンダーをトリガーしない可変値が必要? ref を使用する

Effects を使用する場合

外部システム との同期: ブラウザ API(WebSocket、IntersectionObserver)、サードパーティ非 React ライブラリ、window/document イベントリスナー、非 React DOM 要素(ビデオ、マップ)。

Effects を使用しない場合

• 派生 state — レンダー中に計算する
• 高コスト計算 — useMemo を使用する
• props 変更時に state をリセット — key props を使用する
• ユーザーイベントに応答 — イベントハンドラーを使用する
• 親に state 変更を通知 — 同じイベントハンドラー内で両方を更新する
• Effects の連鎖 — 派生 state を計算し、1 つのイベントハンドラーで更新する

Refs

• レンダリングに影響しない値(タイマー ID、DOM ノード参照)に使用する
• レンダー中に ref.current を読み書きしない。イベントハンドラーと effects 内でのみ使用する
• 動的リストには ref コールバック(useRef をループで使用しない)を使用する
• useImperativeHandle を使用して、親がアクセスできる内容を制限する

カスタムフック

• ロジックを共有し、state は共有しない — 各呼び出しが独立した state インスタンスを取得する
• 実際に他のフックを呼び出す場合のみ useXxx と命名する。そうでない場合は通常の関数を使用する
• ライフサイクルフック(useMount、useEffectOnce)を避ける — useEffect を直接使用して、リンターが依存関係の欠落をキャッチできるようにする
• 単一の具体的なユースケースに焦点を当てる

コンポーネントパターン

• 制御: 親が state を所有。非制御: コンポーネントが state を所有
• props ドリリングより children を使用した構成を優先する
• 大きなコンポーネントツリーを切り替える boolean props(isEditing、isThread、hideAttachments)は構成の臭いと見なしてください。異なるユースケースに対して分離した合成コンポーネントを優先する
• 複雑な再利用可能 UI の場合、多くのオプション props を持つ単一コンポーネントより、プロバイダースコープの state/アクション付きの複合コンポーネントを優先する
• スコープされたコンポーネントファミリーおよび真のグローバル state に Context を使用します。これは子孫によって消費されるローカルインターフェースを定義する場合です
• UI のバリエーション用に JSX を直接レンダーする。設定が実際のドメインデータでない限り、設定配列ミニフレームワークは避ける
• 同じ state/アクションにアクセスする必要があるシブリングまたは外部コントロールがある場合、プロバイダーの境界を上げる
• state 更新後に DOM を同期的に読み取る必要がある場合、flushSync を使用する

コード例と詳細なパターンについては react-patterns.md を参照してください。