SKILL.md
No useEffect
Never call useEffect directly. Use derived state, event handlers, data-fetching libraries, or useMountEffect instead.
Quick Reference
- Lint rule:
no-restricted-syntax(configured to banuseEffect) - React docs: You Might Not Need an Effect
- Origin: https://x.com/alvinsng/status/2033969062834045089
| 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) |