react-hooks-best-practices

React Hooks のベストプラクティス

React アプリケーションでフックを使用し、DX、最適化、ロジックの3つの観点からカスタムフックを設計するための実践的なルールです。

適用する場面

次のような場合は、これらのガイドラインを参照してください。

• フックを使用する React コンポーネントを作成するとき
• カスタムフックを作成またはリファクタリングするとき
• 使いやすく、組み合わせやすいフック API を設計するとき
• 依存関係、エフェクト、ref、状態、コールバック、メモ化をレビューするとき
• 不要な再レンダーが発生しないか、フック API をレビューするとき
• 古いクロージャー、クリーンアップ、SSR、ライフサイクルの正確性について、フックの内部実装をレビューするとき
• 高頻度の更新をサブスクライブするカスタムフックを設計するとき
• snapshot、コールバック、watch() API を公開するフックを使用するとき
• ブラウザーイベントのたびに React の状態を更新するフックをリファクタリングするとき
• DOM に関連する処理を React のレンダー状態から切り離すとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	DX	HIGH	dx-
2	最適化	HIGH	optimization-
3	ロジック	HIGH	logic-

クイックリファレンス

1. DX (HIGH)

• dx-extract-complex-hook - 複雑な機能ロジックをカスタムフックに移し、form、state、functions、refs、features などにまとめた戻り値の契約を使用します

2. 最適化 (HIGH)

• optimization-watch-mode - UI がリアクティブなレンダーデータを必要とする場合にのみ watch() を使用し、それ以外のホットな更新はスナップショットとコールバックに保持します

3. ロジック (HIGH)

ルールは近日公開予定です。

使用方法

詳しい説明と例については、各ルールファイルをお読みください。

rules/dx-extract-complex-hook.md
rules/optimization-watch-mode.md

各ルールファイルには、次の内容が含まれています。

• そのパターンが解決する問題
• 誤ったコード例と正しいコード例
• フックの作成者と利用者向けのガイダンス
• 関連する場合は、資料への参照

完全版ドキュメント

コンパイル済みの概要については、AGENTS.md を参照してください。