Help us improve
Share bugs, ideas, or general feedback.
From react-you-might-not-need-an-effect
Guide for writing React code without unnecessary useEffect. Use when writing or editing React components. Avoid anti-patterns like derived state, chained state updates, and event handlers in effects.
npx claudepluginhub azu/claude-code-pluginsHow this skill is triggered — by the user, by Claude, or both
Slash command
/react-you-might-not-need-an-effect:skills/react-you-might-not-need-an-effectThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
React公式ドキュメント「You Might Not Need an Effect」に基づき、不要なuseEffectを書かないようにする。
Guides React developers through a decision tree to verify useEffect necessity before writing, suggesting alternatives like inline derivation, event handlers, key prop, or TanStack Query to prevent anti-patterns.
Provides React best practices for function components, props interfaces, compound components, useState, useEffect hooks, and state management. Useful for optimizing React code architecture and performance.
Audit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from "You Might Not Need an Effect" and proposes fixes with severity levels.
Share bugs, ideas, or general feedback.
React公式ドキュメント「You Might Not Need an Effect」に基づき、不要なuseEffectを書かないようにする。
Reactコンポーネントを書く・編集する際、useEffectを使う前に以下のパターンに該当しないか確認する。該当する場合はuseEffectを使わない代替案を採用する。
詳細は PATTERNS.md を参照。
| パターン | 問題 | 解決策 |
|---|---|---|
| 導出状態 | propsやstateから計算可能な値をstateで管理 | レンダリング時に計算 |
| 高コスト計算 | useEffectでキャッシュ | useMemoを使用 |
| propsでstate全体リセット | useEffectでリセット | keyを使用 |
| props変更で一部state調整 | useEffectで調整 | レンダリング中に調整 |
| イベントハンドラ処理 | useEffectでAPIコール | イベントハンドラで直接処理 |
| ロジック共有 | useEffectで共通処理 | 関数を抽出して共有 |
| 状態の連鎖更新 | useEffectのチェーン | イベントハンドラで一括更新 |
| パターン | 問題 | 解決策 |
|---|---|---|
| 内部stateを親に渡す | useEffectでstateを親コールバックに渡す | stateを親にリフトアップ |
| 外部データを親に渡す | useEffectでフェッチデータを親に渡す | 親でデータ取得 |
| refを親に渡す | useEffectでref.currentを親に渡す | forwardRefを使用 |
| state初期化 | useEffect内でリテラル値でstate設定 | useStateの初期値で指定 |
| 空のuseEffect | 中身が空のuseEffect | 削除する |