react-no-useeffect
Installation
SKILL.md
React: useEffect を使わない設計パターン
参考: You Might Not Need an Effect
useEffect の代替パターン一覧
| ケース | NG (useEffect) | OK (代替) |
|---|---|---|
| データフェッチ | useEffect + useState | loader / SWR / React Query / use() |
| 派生状態 | useEffect で state を同期 | useMemo / レンダー中の計算 |
| イベントへの反応 | useEffect で変更を検知 | イベントハンドラ内で直接処理 |
| 外部ストアとの同期 | useEffect + subscribe | useSyncExternalStore |
| props/state リセット | useEffect で key 変更を検知 | key prop でコンポーネントを再マウント |
| 親への通知 | useEffect で親の setState | イベントハンドラ内で親のコールバックを呼ぶ |