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.
/plugin marketplace add azu/claude-code-plugins/plugin install azu-react-you-might-not-need-an-effect@azu/claude-code-pluginsThis skill is limited to using the following tools:
PATTERNS.mdReact公式ドキュメント「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 | 削除する |
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.