react-useeffect-avoid

React：useEffect を使わないほうがよい場合

基本原則

useEffect は外部システムとの同期に使うためのエスケープハッチであり、状態管理やイベント処理に使う汎用ツールではありません。

モダンな React のパターンでは、エフェクトによる同期よりも一方向のデータフローとイベント駆動の更新を重視し、パフォーマンスの低下や複雑な同期バグを避けます。

判断フローチャート

Need to sync with external system?
├─ Yes (browser APIs, websockets, timers)
│  └─ Use useEffect
│
└─ No (pure React application logic)
   ├─ Derived state calculation?
   │  ├─ Yes → Calculate during render
   │  └─ No → Continue...
   │
   ├─ User action triggered?
   │  ├─ Yes → Use event handler
   │  └─ No → Continue...
   │
   ├─ State reset needed?
   │  ├─ Yes → Use key prop
   │  └─ No → Continue...
   │
   └─ Really need effect after re-think?
      └─ Yes → Use useState/useReducer/setState pattern

クイックリファレンス

❌ useEffect を使わないケース：

シナリオ	問題	代替手段
派生状態	二重レンダリング	レンダリング中に計算する
状態のリセット	古いデータ	key プロパティを使う
ユーザー操作	意図が失われる	イベントハンドラー
リストのフィルタリング	余分なレンダリング	レンダリング中にフィルタリングする
ブラウザー API	テアリングのバグ（並行処理時）	useSyncExternalStore
フォーム送信	壊れやすいフラグのパターン	非同期ハンドラーを直接使う
データ取得	キャッシュ管理を手動で行う必要がある	React Query、SWR、Suspense

✅ useEffect を使うケース：

• 外部システム（WebSocket、ブラウザー API など）を購読する
• クリーンアップ処理を伴うタイマーを設定する
• サードパーティ製ライブラリとの統合を管理する
• ドキュメントのタイトルを変更する
• レンダリング完了時に分析データやテレメトリーを送信する

React 19：新しい代替手段

// React 19+ - Direct resource reading
function UserProfile({ userId }) {
  const user = use(fetchUser(userId)); // Reads promise directly
  return <div>{user.name}</div>;
}

---

段階的な詳細説明

トピック	ファイル	使用するタイミング
例を交えたアンチパターン	context/anti-patterns.md	useEffect の誤用に関する詳しいコード例
常に避けるべきパターン	context/patterns-to-avoid.md	ログ記録や DOM 操作などの一般的なアンチパターン
判断フローチャートと参考資料	context/decision-tree.md	素早く調べたい場合や、さらに詳しく知りたい場合

参考資料

• React Docs: You Might Not Need an Effect
• React Docs: Synchronizing with Effects