From react-useeffect
Guides React useEffect usage from official docs: when to use for external sync/data fetching, avoid for derived state/events, use alternatives like useMemo/key prop.
npx claudepluginhub softaworks/agent-toolkit --plugin react-useeffectThis skill uses the workspace's default tool permissions.
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.
Guides React Hooks usage including useState, useEffect, useContext, useReducer, useMemo, useCallback, custom hooks, and patterns for state, effects, and performance in functional components.
Provides React hooks reference with syntax, patterns for useState/useReducer state, useEffect side effects/cleanup, useRef/useContext, useMemo/useCallback optimization, React 19 hooks, custom hooks, and best practices.
Guides writing and modifying React components with modern patterns, TypeScript, hooks for state and effects, component composition, and pitfalls to avoid. Triggers on .jsx/.tsx files or React planning.
Share bugs, ideas, or general feedback.
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.
| 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 |
useSyncExternalStore when possible)const fullName = firstName + ' ' + lastNameNeed 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