What problem does it solve?
This Skill prevents unnecessary and error-prone React code patterns by eliminating direct useEffect calls and replacing them with safer, more declarative alternatives.
Core Features & Use Cases
- Derived state without effects: Replace effects that mirror other state/props with inline computation to avoid extra renders and stale state.
- Safer fetching and side effects: Use data-fetching libraries (e.g., query hooks) instead of effect-based fetching that can cause race conditions and duplicated caching logic.
- Event-driven actions: Move user-triggered behavior into event handlers rather than “set a flag then run an effect” patterns.
- One-time mount integration: Use useMountEffect as an explicit escape hatch for setup/cleanup on mount with stable dependencies.
- Reset by remounting: Use the key prop on a parent to reset component state instead of dependency-choreographed effects.
Quick Start
When reviewing or writing React components, replace any direct useEffect usage with the appropriate pattern from the Skill and use useMountEffect only for true mount-time external synchronization.
