No Use Effect

This skill enforces a strict no useEffect rule in React codebases by providing five concrete replacement patterns: derive state inline instead of syncing it, use data-fetching libraries like useQuery, handle user actions in event handlers, use the escape hatch useMountEffect for legitimate mount-only side effects, and leverage the key prop to reset component state. It activates during component writing, refactoring, and PR reviews to catch unnecessary effects before they ship. The approach comes from production experience with race conditions and extra render cycles. If you've inherited a codebase full of setState inside useEffect or fetch wrapped in dependency arrays, this gives you a systematic way to clean it up. Includes ESLint config and verification commands.

skills.sh installs: 1.1K
GitHub stars: 124
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add factory-ai/factory-plugins --skill no-use-effect --agent claude-code

Installs into .claude/skills of the current project.

Files

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 ban useEffect)
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)