---
name: react-use-effect-guard
description: クライアントの React/Next.js コードで useEffect を追加・使用しようとするときに発動。「本当に useEffect が必要か」を検討するよう促す。データ取得は Server Component / Server Actions でできないか、イベントハンドラで十分でないかを確認する。
allowed-tools: Read, Glob
---

# useEffect 使用前の検討

クライアントで **useEffect** を使おうとしたときは、本当に必要かどうかを先に検討する。本プロジェクトでは「どうしても必要な時以外は useEffect を使用してはならない」というルールを前提とする。

## useEffect を使う前に確認すること

1. **データ取得**
   - Server Component や Server Actions で取得できないか。
   - クライアントで「マウント時に1回取得」したい場合でも、まずはサーバー側で取得して props で渡す形を検討する。

2. **イベントに紐づく処理**
   - ユーザー操作やフォーム送信など、イベントに紐づく処理は **イベントハンドラ** で十分でないか。
   - useEffect で「何かの state の変化に反応して実行」するのではなく、その変化を起こすイベントのハンドラ内で処理できないか確認する。

3. **外部システムとの同期**
   - マウント時や依存配列の更新時に毎回実行する必要が本当にあるか。
   - ポーリングや購読の開始/解除など、クライアント側でライフサイクルに紐づける必要がある場合のみ useEffect を検討する。

## どうしても必要な場合のみ useEffect を使用する

以下のような場合は、useEffect の使用を許容する。

- **ブラウザ API の購読**（例: resize, visibilitychange のリスナー登録・解除）
- **フォーカス制御**（例: モーダルオープン時に特定要素へフォーカス）
- **クライアント専用の初回実行**（例: クライアントでのみ必要な初期化処理で、Server Component では代替できない場合）

上記に当てはまらない「データ取得」や「state の変化に連動した処理」は、まず Server Component / Server Actions / イベントハンドラで実現できないか検討してから、useEffect を検討する。