react-no-use-effect
Installation
SKILL.md
No useEffect
Never call useEffect directly in components or hooks. Most useEffect usage compensates for something React already gives you better primitives for. This rule prevents race conditions, infinite loops, stale closures, and implicit dependency chains.
Quick Reference
| Instead of useEffect for... | Use |
|---|---|
| Deriving state from other state/props | Inline computation (Rule 1) |
| Fetching data | useQuery / data-fetching library (Rule 2) |
| Responding to user actions | Event handlers (Rule 3) |
| One-time external sync on mount | useMountEffect (Rule 4) |
| Resetting state when a prop changes | key prop on parent (Rule 5) |
- Lint rule:
no-restricted-syntax(configured to banuseEffect) - React docs: You Might Not Need an Effect
- Origin: https://x.com/alvinsng/status/2034143381530783832