react-ban-use-effect について
React 開発向けのスキルで、直接の `useEffect` 呼び出しを確認し、動作に合う代替手段への移行を案内します。対象範囲を絞った移行、外部システム用フックの設計、lint とテストによる検証を扱います。
主な機能
- 01直接呼び出しとラッパーの分類
- 02描画・データ・イベント・キー境界を優先
- 03外部システム用フックの定義
- 04範囲を限定した lint の設定
- 05プロジェクトのゲートによる検証
活用シーン
- 01React コードの不要な副作用のレビュー
- 02対象範囲内の副作用の移行
- 03外部同期境界の妥当性の文書化
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ uinaf/ agent-skills --skill react-ban-use-effectインストール後、Claude Code で/react-ban-use-effectを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
evals/mechanical-effect-guardrail/criteria.jsontask.mdevals/vendor-map-widget/criteria.jsontask.mdreferences/replacements.mdupstream.md詳細
React Ban useEffect
useEffectを直接使うのは、外部システムとの同期のための最終手段です。コンポーネントからは呼び出さず、実際の外部システムを扱う、レビュー済みのドメイン固有フックでのみ使用できます。
Scope
エフェクトの置き換えは、対象箇所の動作を変更します。リポジトリ全体への lint 適用は別のタスクです。依頼された場合、または既存のリポジトリポリシーで必須の場合に適用してください。レビュー依頼では指摘事項を提示し、実装依頼では、追加の承認を求めることなく、スコープ内の置き換えと検証が許可されます。
Workflow
-
対象範囲内で、直接インポート、
React.useEffect(...)による名前空間呼び出し、useEffectをラップする処理を見つけます。 -
各エフェクトを分類し、次の優先順で置き換えます。
- レンダー時の計算
- サーバー、ローダー、またはフレームワークのデータ API
- リポジトリのサーバー状態レイヤー(たとえば、変数をキーに含め、
signalを渡す TanStack Query のqueryOptionsファクトリー) - イベントハンドラー、アクション、またはミューテーション
- キー付きコンポーネント境界
useSyncExternalStore- 実際の外部システムを扱う、レビュー済みのドメイン固有フック
いずれも適合しない場合は、エフェクトを残す前に外部との同期契約を明記してください。わかりにくいケースについては置き換えを参照してください。
-
リポジトリのフレームワーク、データレイヤー、lint の形式、依存関係のポリシーを維持します。依頼またはリポジトリポリシーで許可されている場合に限り、ライブラリを追加してください。サーバー状態レイヤーがない場合は、残るエフェクトを設計上のギャップとして扱ってください。
-
lint、型、テストの各ゲートを実行し、変更した動作について、実際の UI またはフックを使った最小限のチェックを行います。
Legitimate Effects
正当なエフェクトはすべて、外部システムにちなんだ名前のフック(チャット接続、マップ SDK、ウィジェットなど)にまとめ、それぞれ別のファイルに配置します。フックがセットアップとクリーンアップを所有し、リアクティブな入力をパラメーターとして受け取り、セットアップまたはクリーンアップで読み取るすべての値を列挙します。フックを呼び出すコンポーネントにはエフェクトを置きません。既存のリポジトリフックがあれば、そちらを優先してください。
禁止事項:
- コールバックと呼び出し元が指定する依存配列を受け取る汎用ラッパーを作成すること(
useUpdateEffect(fn, deps)、useAsyncEffect(fn, deps)、useMountEffect(fn)など)。 react-hooks/exhaustive-depsを抑制すること。- 例外的なフックを使ってサーバー状態を取得したり、propsをstateにコピーしたり、ユーザーアクションを中継したり、キー付き境界で行うべきリセットを隠したりすること。
Enforcement
適用が対象範囲に含まれる場合は、リポジトリ既存の linter を拡張し、名前付きのuseEffectインポートとReact.useEffect(...)呼び出しの両方を拒否します。許可するのは、名前が指定されレビュー済みのインテグレーションフックのファイルだけです。src/hooks/**のようなディレクトリを許可してはいけません。また、汎用ラッパーも許可してはいけません。ラッパーとその呼び出し元を、移行すべき違反として報告してください。標準のローカルゲートと CI では、同じ lint 対象範囲を維持してください。エージェント向けのガイダンスや任意のスキャナーで代用することはできません。恒久的な適用手段として、診断ツールの@latestを使わないでください。
レビューでは、新たに追加された直接的なエフェクトはすべて指摘事項として扱います。ただし、その変更で正当な外部システムとの境界が文書化され、立証されている場合を除きます。依存配列の調整ではなく、置き換えを求めてください。
Boundaries
- 移行の対象は、変更箇所または依頼された範囲に限定します。
- 依頼がない限り、lint ルールを含め、
useLayoutEffect、useInsertionEffect、フレームワークのライフサイクル API、React 以外のエフェクトシステムには手を加えないでください。 - パフォーマンス関連のプリミティブを適用するのは、測定された動作またはリポジトリで確立されたパターンがある場合に限ります。
- 上流の出典:上流。