react-useeffect
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
More from jarrodwatts/claude-code-config
rigorous-coding
Apply rigorous coding standards. Use when writing, implementing, or reviewing code.
12web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
10vercel-react-best-practices
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, or performance improvements.
10planning-with-files
Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants structured output.
9