modern-best-practice-react-components

React コンポーネントの作成

最新の React（19 以降）を使用し、明瞭さ、正確さ、保守性を重視した一般的なベストプラクティスに従います。

コンポーネントの構成とスタイル

• 優先 単一の責任を持つ、小さく焦点の定まったコンポーネントを使います
• 優先 アロー関数より名前付きの function コンポーネントを使います
  • 例外：無名のコールバック、インラインのレンダープロップ、クロージャ
• 優先 該当する場合は、戻り値の型と props の型を明示します（TypeScript）
• コンポーネントはフラットで読みやすく保ち、深くネストした JSX は避けます
• 関連するロジック（イベントハンドラー、派生値、ヘルパー）をまとめます

状態管理

• 回避 useEffect() の使用
  • 詳しいガイダンスについては、"You Might Not Need An Effect" ガイドを参照してください
  • 優先 状態を同期するのではなく、レンダー中に値を導出します
  • TanStack Query（@tanstack/react-query）を使ってデータを取得します
• 回避 不要な useState() や useReducer() の使用
  • 可能な場合は、props やほかの状態から状態を導出します
  • 状態は可能な限り下位のコンポーネントに限定します
• 絶対に必要な場合を除き、props を状態に複製しないでください
• 制御されない状態を同期するより、制御コンポーネントを優先します

レンダリングと導出

• 優先 派生値をインラインまたはヘルパー関数で計算します
• useMemo() は控えめに使い、パフォーマンス上の問題が確認されている場合に限ります
• 回避 早すぎる最適化
• レンダーロジックは決定論的で、副作用のない状態に保ちます

イベント処理

• JSX 内のインラインイベントハンドラーは回避します

  • 優先：

    function handleClick() {
      // ...
    }
    
    <button onClick={handleClick} />;
    

  • 次の例より優先します：

    <button
      onClick={() => {
        /* ... */
      }}
    />
    

• ハンドラーには、明確な名前を付けます（handleSubmit、handleChange、handleClose）

• ハンドラーは小さく保ち、複雑なロジックはヘルパーに切り出します

エフェクト、データ、副作用

• 次の目的でエフェクトを使うのは回避します：
  • 派生状態
  • データ変換
  • ハンドラー内で処理できるイベントベースのロジック
• 副作用を避けられない場合は、最小限にとどめ、分離し、十分に文書化します
• 生のエフェクトより、フレームワークレベルまたは外部の抽象化（ルーター、データライブラリ）を優先します

Props とコンポジション

• 設定よりコンポジションを優先します
• 過剰なブール値 props は回避し、意図が明確な API を優先します
• children は意図を持って使い、想定する構造を文書化します
• prop 名は意味が明確で予測しやすいものにします

パフォーマンスと安定性

• 必要な場合にのみ、参照を安定させることを優先します（デフォルトでは行いません）
• 絶対に必要な場合を除き、不要なメモ化（memo、useCallback）は回避します
• リストのレンダリングでは、キーを安定させ、意味のあるものにします

一般原則

• コンパイラーより先に、人間が読むことを考えてコードを書きます
• 小手先の工夫より明示性を優先します
• 読みやすさと長期的な保守性を重視します
• 複雑に感じるパターンは、コンポーネントの境界を見直します