react-no-use-effectlisted

# No useEffect Never call `useEffect` directly. Use derived state, event handlers, data-fetching libraries, or `useMountEffect` instead. ## Quick Reference - Repo linting: `bun lint --format json <package-path>` - Escape hatch hook: `useMountEffect` from `@onequery/ui/hooks/use-mount-effect` - React docs: [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect) - Origin: [https://x.com/alvinsng/status/2033969062834045089](https://x.com/alvinsng/status/2033969062834045089) > Comment: the repo currently has `useMountEffect`, but it does not appear to have a global lint rule that already bans `useEffect`. Treat this skill as the policy source unless that restriction is added later. | 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) | ## When to Use This Skill - Writing new React components - Refactoring existing `useEffect` calls - Reviewing PRs that introduce `useEffect` - An agent adds `useEffect` "just in case" ## Workflow ### 1. Identify the useEffect Determine what the effect is doing: deriving state, fetching data, responding to an event, syncing with an external system, or resetting state.