07242683bf
Complete collection of AI agent skills including: - Frontend Development (Vue, React, Next.js, Three.js) - Backend Development (NestJS, FastAPI, Node.js) - Mobile Development (React Native, Expo) - Testing (E2E, frontend, webapp) - DevOps (GitHub Actions, CI/CD) - Marketing (SEO, copywriting, analytics) - Security (binary analysis, vulnerability scanning) - And many more... Synchronized from: https://skills.sh/ Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
2.3 KiB
Markdown
54 lines
2.3 KiB
Markdown
---
|
|
name: react-useeffect
|
|
description: 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.
|
|
---
|
|
|
|
# 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 `useSyncExternalStore` when 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
|
|
|
|
1. **Transforming data for rendering** - Calculate at top level, re-runs automatically
|
|
2. **Handling user events** - Use event handlers, you know exactly what happened
|
|
3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`
|
|
4. **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](./anti-patterns.md) - Common mistakes with fixes
|
|
- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore
|