no-use-effect · factory-ai — Claude Code skill: ban useEffect in React

What no-use-effect does

The rule is simple: never call useEffect directly. Reach for inline computation, a data-fetching library, an event handler, useMountEffect, or a key on the parent instead. A table maps each case to its replacement, and every rule ships with a bad example, a good one, and a smell test that tells you when you are drifting back to an effect.

The skill activates while the agent writes a new component, refactors existing useEffect calls, reviews a PR that adds effects, or drops in useEffect just in case. There is one escape hatch: useMountEffect, a wrapper around useEffect with an empty dependency array, so the intent reads clearly. It is meant for one-time external sync on mount — focus, scroll, browser API subscriptions, third-party widget lifecycles.

After edits the skill suggests running npm run lint, npm run typecheck and npm run test with a package filter. One thing to check first: the project needs the no-restricted-syntax lint rule configured, otherwise the ban rests on the agent's discipline alone. Without that rule, useEffect creeps back in at the first convenient moment.