Best practices and decision framework for using useEffect in React.
Install
mkdir -p .claude/skills/react-effects && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7131" && unzip -o skill.zip -d .claude/skills/react-effects && rm skill.zipInstalls to .claude/skills/react-effects
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.
Guidelines for when to use (and avoid) useEffect in React componentsKey capabilities
- →Identify state that can be derived during rendering
- →Replace state-resetting effects with key-prop re-mounting
- →Convert event-driven effects into direct event handlers
- →Migrate manual subscriptions to useSyncExternalStore
How it works
Applies a decision tree to evaluate if side effects are truly necessary, replacing them with declarative state management or event-based logic.
Inputs & outputs
When to use react-effects
- →Refactor code to replace unnecessary effects with derived state
- →Determine if an effect is needed for a specific data fetch
- →Identify better alternatives for state resetting on prop changes
- →Review component code for effect-related anti-patterns
About react-effects
Provides a clear decision-making process for managing side effects in React. It offers guidance on when to avoid effects by using derived state, event handlers, or proper component keys.
Guidelines for when to use (and avoid) useEffect in React components
When not to use it
- →When handling actual DOM manipulations or browser API subscriptions
- →When connecting to non-React widget lifecycles
Limitations
- →Requires knowledge of React's render phase vs commit phase
- →Does not handle complex async orchestration without additional manual logic
How it compares
It actively promotes the removal of synchronization complexity, whereas generic prompts often suggest adding deps to fix errors.
Compared to similar skills
react-effects side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-effects (this skill) | 3 | 8mo | No flags | Intermediate |
| zustand | 113 | 3mo | No flags | Intermediate |
| accessibility-compliance | 45 | 4mo | No flags | Intermediate |
| react-modernization | 21 | 4mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by coder
View all by coder →You might also like
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
frontend-testing
langgenius
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.