react-useeffect-avoid
Helps developers refactor inefficient useEffect patterns in React.
Install
mkdir -p .claude/skills/react-useeffect-avoid && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15839" && unzip -o skill.zip -d .claude/skills/react-useeffect-avoid && rm skill.zipInstalls to .claude/skills/react-useeffect-avoid
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.Key capabilities
- →Synchronize with external systems like browser APIs, websockets, or timers
- →Calculate derived state during render
- →Handle user actions with event handlers
- →Reset state using the `key` prop
- →Manage third-party library integration
- →Handle document title changes and analytics
How it works
The skill provides a decision tree to determine if `useEffect` is necessary, suggesting alternatives like calculating during render, using event handlers, or the `key` prop for state management.
Inputs & outputs
When to use react-useeffect-avoid
- →Refactor useeffect logic
- →Optimize react component performance
- →Fix stale state bugs
About this skill
React: When Not to Use useEffect
Core Principle
useEffect is an escape hatch for synchronizing with external systems, not a general-purpose tool for state management or event handling.
Modern React patterns prioritize one-way data flow and event-driven updates over effect-based synchronization to avoid performance penalties and complex synchronization bugs.
Decision Tree
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
Quick Reference
❌ Don't use useEffect for:
| Scenario | Problem | Alternative |
|---|---|---|
| Derived state | Double render | Calculate during render |
| State resets | Stale data | Use key prop |
| User actions | Lost intent | Event handlers |
| List filtering | Extra renders | Filter in render |
| Browser APIs | Tearing bugs (concurrent) | useSyncExternalStore |
| Form submission | Fragile flag pattern | Direct async handler |
| Data fetching | Manual cache management | React Query, SWR, Suspense |
✅ DO use useEffect for:
- Subscribing to external systems (websockets, browser APIs, etc.)
- Setting up timers with cleanup
- Managing third-party library integration
- Document title changes
- Analytics/telemetry when rendering completes
React 19: New Alternatives
// React 19+ - Direct resource reading
function UserProfile({ userId }) {
const user = use(fetchUser(userId)); // Reads promise directly
return <div>{user.name}</div>;
}
Progressive Disclosure
| Topic | File | When to Use |
|---|---|---|
| Anti-patterns with examples | context/anti-patterns.md | Detailed code examples of useEffect mistakes |
| Patterns to always avoid | context/patterns-to-avoid.md | Common anti-patterns like logging, DOM manipulation |
| Decision tree & references | context/decision-tree.md | Quick lookup and further reading |
References
When not to use it
- →When calculating derived state
- →When performing state resets
- →When handling user actions
Limitations
- →The skill advises against using `useEffect` for derived state
- →The skill advises against using `useEffect` for state resets
- →The skill advises against using `useEffect` for user actions
How it compares
This skill guides developers away from common `useEffect` anti-patterns by promoting event-driven updates and render-time calculations, leading to more performant and maintainable React code than relying solely on effects.
Compared to similar skills
react-useeffect-avoid side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-useeffect-avoid (this skill) | 0 | 3mo | No flags | Intermediate |
| react-doctor | 0 | 4mo | Review | Intermediate |
| frontend-developer | 0 | 4mo | No flags | Intermediate |
| react-best-practices | 0 | 7mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
react-doctor
Mayank1053
Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
react-best-practices
lokrain
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization,
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
senior-fullstack
davila7
Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects, analyzing code quality, implementing design patterns, or setting up development workflows.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.