react-useeffect

Effectは本当に必要か？

Effectは React からの脱出ハッチです。外部システムと同期するために使います。外部システムが関係しない場合、Effectは不要なはずです。

クイックリファレンス

状況	やってはいけないこと	推奨
props/state から導出される状態	useState + useEffect	レンダー中に計算する
重い計算	キャッシュのために useEffect を使う	useMemo
props 変更時の状態リセット	setState を使った useEffect	key prop
ユーザーイベントへの応答	state を監視する 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、state のリフトアップ、useSyncExternalStore