ReddRadar
Agent skill
react-useeffect
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.
Install this agent skill to your Project
npx add-skill https://github.com/fluid-tools/claude-skills/tree/main/.claude/skills/react-useeffect
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
fluid-tools/claude-skills
vercel-ai-sdk
Guide for Vercel AI SDK v6 implementation patterns including generateText, streamText, ToolLoopAgent, structured output with Output helpers, useChat hook, tool calling, embeddings, middleware, and MCP integration. Use when implementing AI chat interfaces, streaming responses, agentic applications, tool/function calling, text embeddings, workflow patterns, or working with convertToModelMessages and toUIMessageStreamResponse. Activates for AI SDK integration, useChat hook usage, message streaming, agent development, or tool calling tasks.
fluid-tools/claude-skills
convex-anti-patterns
Critical rules and common mistakes to avoid in Convex development. Use when reviewing Convex code, debugging issues, or learning what NOT to do. Activates for code review, debugging OCC errors, fixing type errors, or understanding why code fails in Convex.
fluid-tools/claude-skills
convex-helpers-patterns
Guide for convex-helpers library patterns including Triggers, Row-Level Security (RLS), Relationship helpers, Custom Functions, Rate Limiting, and Workpool. Use when implementing automatic side effects, access control, relationship traversal, auth wrappers, or concurrency management. Activates for triggers setup, RLS implementation, custom function wrappers, or convex-helpers integration tasks.
fluid-tools/claude-skills
convex-schema-validators
Guide for Convex schema design, validators, and TypeScript types. Use when defining database schemas, creating validators for function arguments/returns, working with document types, or ensuring type safety. Activates for schema.ts creation, validator usage, Id/Doc type handling, or TypeScript integration tasks.
fluid-tools/claude-skills
typescript-strict-mode
Guide for strict TypeScript practices including avoiding any, using proper type annotations, and leveraging TypeScript's type system effectively. Use when working with TypeScript codebases that enforce strict type checking, when you need guidance on type safety patterns, or when encountering type errors. Activates for TypeScript type errors, strict mode violations, or general TypeScript best practices.
fluid-tools/claude-skills
convex-actions-scheduling
Guide for Convex actions, scheduling, cron jobs, and orchestration patterns. Use when implementing external API calls, background jobs, scheduled tasks, cron jobs, or multi-step workflows. Activates for action implementation, ctx.scheduler usage, crons.ts creation, or long-running workflow tasks.
Didn't find tool you were looking for?