# no-use-effect

A skill that stops the agent from writing useEffect in React code and points to five replacements. Useful during refactors and PR review.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 installs · ★ 116
- Author: Factory-AI
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Factory-AI/factory-plugins/tree/HEAD/plugins/typescript/skills/no-use-effect/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/no-use-effect

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Factory-AI/factory-plugins --skill no-use-effect -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/no-use-effect/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/no-use-effect/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Factory-AI/factory-plugins --skill no-use-effect -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/no-use-effect/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Factory-AI/factory-plugins --skill no-use-effect -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/no-use-effect/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Factory-AI/factory-plugins no-use-effect
```

2. **Manually: put the files in place**
- File: `.github/skills/no-use-effect/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Factory-AI/factory-plugins --skill no-use-effect -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Factory-AI/factory-plugins --path plugins/typescript/skills/no-use-effect
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/no-use-effect/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Factory-AI/factory-plugins --skill no-use-effect -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Factory-AI/factory-plugins/tree/HEAD/plugins/typescript/skills/no-use-effect/SKILL.md

## When to use it
- strip redundant `useEffect` calls during a component refactor
- explain to the agent why state should not be synced through an effect
- spot a flag-state effect that only relays an action
- replace hand-rolled caching and request cancellation with a library
- reset local component state when an id changes

## Example prompts
- Rewrite this component without useEffect and tell me which rule you applied
- Review this PR: where can useEffect become inline computation?
- The agent added useEffect just in case — check it and remove it

## Similar
- [react-useeffect](https://affpapa.org/en/nevibecode/skills/react-useeffect.md) — skill · 127 installs
- [no-comments](https://affpapa.org/en/nevibecode/skills/no-comments.md) — skill · 5200 installs
- [effect-v3-to-v4](https://affpapa.org/en/nevibecode/skills/effect-v3-to-v4.md) — skill · 704 installs
- [fix](https://affpapa.org/en/nevibecode/skills/react-fix.md) — skill · 2300 installs
- [effect-best-practices](https://affpapa.org/en/nevibecode/skills/effect-best-practices.md) — skill · 840 installs
- [21st-cli-use](https://affpapa.org/en/nevibecode/skills/21st-cli-use.md) — skill · 2000 installs

## Other versions with the same name
- [no-use-effect · alejandrobailo](https://affpapa.org/en/nevibecode/skills/alejandrobailo-no-use-effect.md) — 729 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md