react-useeffect

Effect は必要ないかもしれません

Effect は React の緊急避難口です。外部システムとの同期に使用します。外部システムが関与しない場合、Effect は必要ありません。

クイックリファレンス

状況	やらないこと	やること
props/state から派生する状態	useState + useEffect	レンダリング中に計算する
負荷の高い計算	useEffect でキャッシュする	useMemo
prop の変更時に状態をリセット	setState を伴う useEffect	key prop
ユーザーイベントへの応答	状態を監視する useEffect	イベントハンドラーを直接使う
変更を親に通知する	onChange を呼び出す useEffect	イベントハンドラー内で呼び出す
データを取得する	クリーンアップなしの useEffect	クリーンアップを伴う useEffect またはフレームワーク

Effect が必要な場合

• 外部システム（React 以外のウィジェット、ブラウザー API）との同期
• 外部ストアへのサブスクリプション（可能であれば useSyncExternalStore を使用）
• コンポーネントが表示されたことを契機に実行する分析／ログ記録
• 適切なクリーンアップを伴うデータ取得（またはフレームワーク組み込みの仕組みを使用）

Effect が不要な場合

1. レンダリング用のデータ変換 - 最上位で計算すれば、自動的に再実行されます
2. ユーザーイベントの処理 - イベントハンドラーを使えば、何が起きたかを正確に把握できます
3. 状態の導出 - 単に計算します：const fullName = firstName + ' ' + lastName
4. 状態更新の連鎖 - 次の状態をすべてイベントハンドラー内で計算します

判断フローチャート

Need to respond to something?
├── User interaction (click, submit, drag)?
│   └── Use EVENT HANDLER
├── Component appeared on screen?
│   └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│   └── CALCULATE DURING RENDER
│       └── Expensive? Use useMemo
└── Need to reset state when prop changes?
    └── Use KEY PROP on component

詳細なガイダンス

• アンチパターン - よくある間違いと修正方法
• より良い代替方法 - useMemo、key prop、状態のリフトアップ、useSyncExternalStore