/dashboard/public/component-content/skills/development/react-useeffect.json

{"content": "---\nname: react-useeffect\ndescription: 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.\n---\n\n# You Might Not Need an Effect\n\nEffects 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.\n\n## Quick Reference\n\n| Situation | DON'T | DO |\n|-----------|-------|-----|\n| Derived state from props/state | `useState` + `useEffect` | Calculate during render |\n| Expensive calculations | `useEffect` to cache | `useMemo` |\n| Reset state on prop change | `useEffect` with `setState` | `key` prop |\n| User event responses | `useEffect` watching state | Event handler directly |\n| Notify parent of changes | `useEffect` calling `onChange` | Call in event handler |\n| Fetch data | `useEffect` without cleanup | `useEffect` with cleanup OR framework |\n\n## When You DO Need Effects\n\n- Synchronizing with **external systems** (non-React widgets, browser APIs)\n- **Subscriptions** to external stores (use `useSyncExternalStore` when possible)\n- **Analytics/logging** that runs because component displayed\n- **Data fetching** with proper cleanup (or use framework's built-in mechanism)\n\n## When You DON'T Need Effects\n\n1. **Transforming data for rendering** - Calculate at top level, re-runs automatically\n2. **Handling user events** - Use event handlers, you know exactly what happened\n3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`\n4. **Chaining state updates** - Calculate all next state in the event handler\n\n## Decision Tree\n\n```\nNeed to respond to something?\n├── User interaction (click, submit, drag)?\n│   └── Use EVENT HANDLER\n├── Component appeared on screen?\n│   └── Use EFFECT (external sync, analytics)\n├── Props/state changed and need derived value?\n│   └── CALCULATE DURING RENDER\n│       └── Expensive? Use useMemo\n└── Need to reset state when prop changes?\n    └── Use KEY PROP on component\n```\n\n## Detailed Guidance\n\n- [Anti-Patterns](./anti-patterns.md) - Common mistakes with fixes\n- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore\n"}