react-useeffect
A guide for React developers on when to avoid useEffect and how to use better alternatives for state and data management.
Install
mkdir -p .claude/skills/react-useeffect && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4252" && unzip -o skill.zip -d .claude/skills/react-useeffect && rm skill.zipInstalls to .claude/skills/react-useeffect
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.
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.Key capabilities
- →Identify appropriate use of event handlers
- →Implement cleanup functions for effects
- →Calculate derived state during rendering
- →Use key props for state resetting
- →Replace effects with useMemo
How it works
Applies a formal decision tree to identify if a task is better handled by component renders or event triggers.
Inputs & outputs
When to use react-useeffect
- →Refactor a component to remove unnecessary useEffect
- →Replace state synchronization with derived values
- →Identify correct patterns for data fetching in React
About this skill
You Might Not Need an Effect
Effects are an escape hatch from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.
Quick Reference
| Situation | DON'T | DO |
|---|---|---|
| Derived state from props/state | useState + useEffect | Calculate during render |
| Expensive calculations | useEffect to cache | useMemo |
| Reset state on prop change | useEffect with setState | key prop |
| User event responses | useEffect watching state | Event handler directly |
| Notify parent of changes | useEffect calling onChange | Call in event handler |
| Fetch data | useEffect without cleanup | useEffect with cleanup OR framework |
When You DO Need Effects
- Synchronizing with external systems (non-React widgets, browser APIs)
- Subscriptions to external stores (use
useSyncExternalStorewhen possible) - Analytics/logging that runs because component displayed
- Data fetching with proper cleanup (or use framework's built-in mechanism)
When You DON'T Need Effects
- Transforming data for rendering - Calculate at top level, re-runs automatically
- Handling user events - Use event handlers, you know exactly what happened
- Deriving state - Just compute it:
const fullName = firstName + ' ' + lastName - Chaining state updates - Calculate all next state in the event handler
Decision Tree
Need to respond to something?
├── User interaction (click, submit, drag)?
│ └── Use EVENT HANDLER
├── Component appeared on screen?
│ └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│ └── CALCULATE DURING RENDER
│ └── Expensive? Use useMemo
└── Need to reset state when prop changes?
└── Use KEY PROP on component
Detailed Guidance
- Anti-Patterns - Common mistakes with fixes
- Better Alternatives - useMemo, key prop, lifting state, useSyncExternalStore
When not to use it
- →Synchronizing with local browser-side UI states
- →Triggering side effects unrelated to React component lifecycle
Prerequisites
Limitations
- →Refactoring requires developer understanding of component lifecycles
- →Some external systems still necessitate effects
How it compares
It forces a reduction in side-effect complexity rather than just helping write the effects themselves.
Compared to similar skills
react-useeffect side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-useeffect (this skill) | 7 | 7mo | No flags | Intermediate |
| accessibility-compliance | 45 | 2mo | No flags | Intermediate |
| feature-flags | 6 | 6mo | Review | Intermediate |
| react-ui-patterns | 2 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
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.
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.
react-ui-patterns
ChrisWiles
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
cc-skill-coding-standards-v2
diegosouzapw
Coding Standards & Best Practices workflow skill. Use this skill when the user needs Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development and the operator should preserve the upstream workflow, copied support files, and provenance before
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.