react-component-conventions

name	react-component-conventions
description	React component design conventions focusing on Server/Client component boundaries, composition patterns, and data flow. Auto-triggers when writing or modifying React components in files matching `*.tsx`, `*.jsx`, `*.ts`, or `*.js` to ensure correct RSC patterns and optimal component architecture.

React Component Design Conventions

React コンポーネント設計の規約集。Server Components / Client Components の境界設計、Composition パターン、データフローに関するルールを定義する。

When to Apply

以下のいずれかに該当する作業時に自動で参照する：

• 次のパターンに一致するファイルの作成・修正
  • *.tsx
  • *.jsx
  • *.ts
  • *.js
• React コンポーネントの新規作成
• 既存コンポーネントのリファクタリング
• "use client" ディレクティブの追加・削除判断
• データ取得パターンの実装
• コンポーネント間のデータフロー設計

Compatibility

React 19+ / RSC対応フレームワーク

Rule Categories

Category	Prefix
Server/Client 境界	boundary-
データ取得	fetching-
Composition パターン	composition-
Suspense/ErrorBoundary	suspense-
Hooks 設計	hooks-
パフォーマンス	perf-
コーディング規約	style-

Quick Reference

Server/Client 境界

• boundary-minimize-use-client - "use client" はコンポーネントツリーの末端に置く
• boundary-leaf-interactivity - インタラクティブ要素のみを Client Component として切り出す
• boundary-no-premature-client - クライアント機能を使わないのに "use client" を付けない
• boundary-serialize-props - Server → Client に渡す props はシリアライズ可能にする
• boundary-context-provider-wrapper - Context Provider は専用の Client Component でラップする

データ取得

• fetching-server-first - データ取得は Server Component で行い、結果を props で渡す
• fetching-no-useeffect-fetch - 初期データ取得に useEffect を使わない
• fetching-colocate - データ取得はそれを使うコンポーネントにコロケーションする
• fetching-async-component - Server Component は async/await で直接データ取得する

Composition パターン

• composition-children-across-boundary - children を使って Server Component を Client Component 内に配置する
• composition-render-prop-for-server - 複雑なレイアウトでは render prop で Server Component を注入する
• composition-slots-pattern - 複数の Server Component を Client に渡すには名前付き slots を使う
• composition-avoid-prop-drilling - 深いprops受け渡しより Composition で解決する

Suspense / ErrorBoundary

• suspense-granular-boundaries - Suspense 境界は可能な限り細粒度に配置する
• suspense-avoid-single-wrapper - ページ全体を1つの Suspense で囲まない
• suspense-parallel-streaming - 独立したデータソースは別々の Suspense で並列ストリーミングする
• suspense-meaningful-fallback - fallback は意図を持って選択する
• errorboundary-isolation - 障害の影響範囲を限定するために ErrorBoundary を適切に配置する

Hooks 設計

• hooks-single-responsibility - 1つの custom hook は1つの関心事のみを扱う
• hooks-extract-logic - 計算ロジックは hook の外の pure function として抽出する
• hooks-stable-references - コールバックや依存値の参照安定性を意識する
• hooks-use-effect-discipline - useEffect は外部システムとの同期専用にする

パフォーマンス

• perf-no-premature-memo - useMemo / useCallback を計測なしに使わない
• perf-transition-heavy-update - 重い状態更新には useTransition を使う
• perf-deferred-slow-render - 遅いコンポーネントには useDeferredValue で入力のレスポンスを維持する

コーディング規約

• style-arrow-named-export - アロー関数 + named export でコンポーネントを定義する
• style-props-type - Props の型は type で定義し、React.FC で型付けする
• style-file-naming - ファイル名は kebab-case で統一する
• style-import-order - インポートはカテゴリ順に並べ、グループ間に空行を入れる

How to Use

個別ルールの詳細は rules/ ディレクトリ内のファイルを参照。上記 Quick Reference のリンクから各ルールにアクセスできる。

各ルールファイルには以下が含まれる：

• ルールの説明と根拠
• Bad: 間違ったコード例
• Good: 正しいコード例
• 判断に迷うケースのガイダンス